diff --git a/.prettierignore b/.prettierignore index 24b5b1740a6..90a6a6c2be7 100644 --- a/.prettierignore +++ b/.prettierignore @@ -11,8 +11,6 @@ src/theme/Layout/index.tsx src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx src/theme/prism-include-languages.ts -legacy-stencil-components -scripts/bak # Auto-generated files docs/native diff --git a/docs/angular/your-first-app.mdx b/docs/angular/your-first-app.mdx index 9da4af2492b..79939fcef6e 100644 --- a/docs/angular/your-first-app.mdx +++ b/docs/angular/your-first-app.mdx @@ -24,12 +24,6 @@ Here’s the finished app running on all 3 platforms: allowFullScreen > -:::note - -Looking for the previous version of this guide that covered Ionic 4 and Cordova? Refer to the [Ionic 4 and Cordova guide](../developer-resources/guides/first-app-v4/intro.mdx). - -::: - ## What We'll Build We'll create a Photo Gallery app that offers the ability to take photos with your device's camera, display them in a grid, and store them permanently on the device. diff --git a/docs/developer-resources/courses.mdx b/docs/developer-resources/courses.mdx deleted file mode 100644 index f95f4f3c18a..00000000000 --- a/docs/developer-resources/courses.mdx +++ /dev/null @@ -1,107 +0,0 @@ -# Courses - -### [Elite Ionic](https://www.joshmorony.com/elite/) - -{/* cspell:disable-next-line */} - -by Josh Morony - -Elite Ionic is an online course for Ionic developers who want to move past the basics, and build complex, well tested, high performing, beautiful, and useable mobile applications. It is recommended that you already have a reasonably solid understanding of the basics of Ionic before starting this course. - -### [Ionic Academy](https://ionicacademy.com/) - -{/* cspell:disable-next-line */} - -by Simon Grimm - -Learn Ionic with step-by-step video courses & quick wins from one of the Ionic community leaders. Covers beginner, intermediate and advanced topics. Get access to a community of developers just like you. - -### [Ionic Framework: Tips, Tricks & Techniques](https://www.packtpub.com/mobile/ionic-framework-tips-tricks-and-techniques-video) - -{/* cspell:disable-next-line */} - -by Charles Muzonzini - -In this course, you will master tips and best practices for Ionic 4 & Ionic 5 that you can immediately implement to build high quality apps. This course covers a wide variety of topics from increasing app performance, to building custom native plugins, to securing your apps. It's a practical, hands-on course that will take your app building skills to the next level. - -### [Building Desktop Apps with Ionic and Electron](https://pluralsight.pxf.io/VeMXO) - -{/* cspell:disable-next-line */} - -by Michael Callaghan at Pluralsight - -Desktop development has historically required dramatically different skills than those required for web -development. The two disciplines don't mesh well. In this course, Building Desktop Apps with Ionic and Electron, -you will gain the ability to apply your hard-earned web development skills to build amazing desktop -applications. First, you will learn how to build a functional and attractive UI with Ionic and Angular. Next, -you will discover how to wrap that UI into an Electron application shell. Finally, you will explore how to -package your app and make it ready for distribution. When you are finished with this course, you will have the -skills and knowledge of Ionic and Electron development needed to deploy and distribute a beautiful app to both -Windows and macOS users. - -### [Building Progressive Web Apps with Ionic](https://pluralsight.pxf.io/Ly2EY) - -{/* cspell:disable-next-line */} - -by Michael Callaghan at Pluralsight - -Everything changed when Google created the concept of Progressive Web Applications or PWA. A PWA is a pure web -application that you can install on devices, that can function with limited network functionality, through its -use of intelligent caching. Build a Progressive Web App that will run anywhere. In this course, Building -Progressive Web Apps with Ionic, you will learn foundational knowledge and gain the ability to create a web -application that will run anywhere: the browser, desktop, or mobile clients. First, you will learn what a -Progressive Web App (or PWA) is. Next, you will discover how to use the Ionic Framework, Angular, and Firebase -to create, deploy, and optimize a basic web application into a full-blown PWA. Finally, you will explore how to -configure the application to make it installable and runnable on Androids and iPhones. When you’re finished with -this course, you will have the skills and knowledge of Ionic and PWAs needed to create and deploy your own -Progressive Web Application anywhere you desire. - -### [Ionic CLI](https://pluralsight.pxf.io/ionic-cli) - -{/* cspell:disable-next-line */} - -by Michael Callaghan at Pluralsight - -Since its inception, the Ionic Framework has included a rudimentary command line interface. Though only a few -years old, it has matured into a powerful tool that should be part of every developer’s toolbox. This course, -Ionic CLI, will start at the top and explore the Ionic CLI. First, you'll learn how to create projects and -components. Next, you will learn how to build and serve apps. Finally, you'll discover how to share projects -with others, and even integrate with other build tools. Whether you’re just starting to explore Ionic, or have -been using it since its pre-beta days, there is something here for you. By the end of the course, you’ll have -the confidence to use the Ionic CLI as part of your everyday Ionic development. - -### [Wordpress Rest API and Ionic 4 (Angular) App With Auth](https://www.udemy.com/course/wordpress-rest-api-and-ionic-3-crud/) - -{/* cspell:disable-next-line */} - -by Baljeet Singh at Udemy - -### [Building Mobile Apps with Ionic 2, Angular 2, and TypeScript](https://app.pluralsight.com/library/courses/ionic2-angular2-typescript-mobile-apps/table-of-contents) - -{/* cspell:disable-next-line */} - -by Pluralsight - -### [Introducing Ionic 2](http://shop.oreilly.com/product/0636920050353.do) - -{/* cspell:disable-next-line */} - -by Mathieu Chauvinc - -### [Ionic 2 Master Course](https://www.udemy.com/ionic-2-tutorial/) - -{/* cspell:disable-next-line */} - -by Udemy - -### [Introducing Ionic 2](https://www.udemy.com/introducing-ionic-2/) - -{/* cspell:disable-next-line */} - -by Udemy - -### [Ionic 2 Solutions](https://www.packtpub.com/web-development/ionic-2-solutions-video) - -{/* cspell:disable-next-line */} - -by Hoc Phan diff --git a/docs/developer-resources/guides.mdx b/docs/developer-resources/guides.mdx deleted file mode 100644 index c0590b83684..00000000000 --- a/docs/developer-resources/guides.mdx +++ /dev/null @@ -1,9 +0,0 @@ -# Guides - -### [Your First Ionic App - v3](guides/first-app-v3/intro.mdx) - -Follow along as we create a working Photo Gallery app using Ionic Framework v3 and Appflow. - -### [Your First Ionic 4 App - Angular and Cordova](guides/first-app-v4/intro.mdx) - -Follow along as we create a working Photo Gallery app using Ionic Framework v4 and Cordova. diff --git a/docs/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx b/docs/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx deleted file mode 100644 index cc52ec5f895..00000000000 --- a/docs/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx +++ /dev/null @@ -1,195 +0,0 @@ -# Creating a Photo Gallery with Device Storage - -Last time, we successfully added the Camera plugin to the About page of our Tabs app. Currently, the photo is replaced each time a new one is taken. What if we wanted to display multiple photos together? Let’s create a photo gallery. You can follow along with the complete code for this in [the part 2 folder](https://github.com/ionic-team/photo-gallery-tutorial-ionic3/tree/master/part2) on GitHub. - -## Creating a Dedicated Photo Service - -From a terminal window, navigate to your Ionic project and run: - -```shell -ionic g provider PhotoProvider -``` - -This creates a PhotoProvider class in a dedicated providers/photo folder: - -```Javascript -import { HttpClient } from '@angular/common/http'; -import { Injectable } from '@angular/core'; - -/* - Generated class for the PhotoProvider provider. - - See https://angular.io/guide/dependency-injection for more info on providers - and Angular DI. -*/ -@Injectable() -export class PhotoProvider { - - constructor(public http: HttpClient) { - console.log('Hello PhotoProvider Provider'); - } -} -``` - -Within this class, add a Photo class. The “data” property represents the base64 image data of a captured photo: - -```Javascript -class Photo { - data: any; -} -``` - -Then, create a Photos array to represent our photo gallery: - -```Javascript -export class PhotoProvider { - - public photos: Photo[] = []; - - constructor() { } -} -``` - -Back in `about.ts`, import PhotoProvider: - -```Javascript -import { PhotoProvider } from '../../providers/photo/photo'; -``` - -Add it to the Constructor: - -```Javascript -constructor(private camera: Camera, public photoService: PhotoProvider) { } -``` - -Next, move all code pertaining to the Camera plugin to the PhotoService class. This includes the takePicture method, the Camera import, and the About page constructor. Also, remove references to HttpClient - we won’t be making any HTTP calls. - -Continuing on, we need to convert currentImage variable references to the new photos array. Start by adding the captured photo data into the photos array: - -```Javascript -this.camera.getPicture(options).then((imageData) => { - // Add new photo to gallery - this.photos.unshift({ - data: 'data:image/jpeg;base64,' + imageData - }); }, (err) => { - // Handle error - console.log("Camera issue: " + err); -}); -``` - -In `about.page.ts`, remove the currentImage variable and the reference to Camera in the constructor, leaving only PhotoService: - -```Javascript -export class AboutPage { - constructor(public navCtrl: NavController, public photoService: PhotoProvider) { } -} -``` - -Next, in `about.page.html`, remove the currentImage img tag. In its place, use an ion-grid component, which provides a great way to arrange elements on a page. In this case, we’ll use it to display 2 photos per row. - -```html - - - - - - - -``` - -Here, we loop through each photo in the PhotoServices photos array, adding a new column for each. Since an ion-row consists of 12 “blocks” of space, and we’re setting the size to 6 (“col-6”), only 2 photos are displayed per row. - -Last, update the Fab button to call the PhotoProvider’s `takePicture` method: - -```Html - - - -``` - -Save the file and watch - a camera button appears! Tap on it and notice that it doesn’t do anything. Let’s fix that next. - -## Add the Camera Dependencies via the CLI - -In order to use the Camera, we need to bring in its JavaScript and native library dependencies. Back over in your Terminal window, run the following command, which adds the JavaScript library to the project, thus exposing the Camera API in TypeScript code: - -```shell -npm install --save @awesome-cordova-plugins/camera -``` - -In `package.json`, you’ll notice a new JavaScript dependency has been added: - -`"@awesome-cordova-plugins/camera": "^4.12.0"` - -Next, run this command to add the native iOS and Android code, effectively allowing the Camera to work on a mobile device: - -```shell -ionic cordova plugin add cordova-plugin-camera -``` - -In `config.xml`, a new plugin entry is created: - -```xml - -``` - -The next step is only required for iOS users. As of iOS 10, developers must provide a reason for why the app wishes to access the device camera. Add this to the bottom of `config.xml`: - -```xml - - - Used to take pictures - -``` - -## Add Camera plugin to Angular App Module - -There’s one more step we need to do since this is an Angular project: register the Camera in the App Module (`src/app/app.module.ts`). First, import the Camera module: - -```Javascript -import { Camera } from '@awesome-cordova-plugins/camera'; -``` - -Then, add it as a Provider: - -```Javascript -providers: [ - StatusBar, - SplashScreen, - Camera, - {provide: ErrorHandler, useClass: IonicErrorHandler} - ], -``` - -It can now be used on any of our App pages. - -## Add the Camera to the About page - -Our camera button doesn’t do anything yet. Over in `about.html`, add a click handler to the button: - -```html - -``` - -Then, update the image placeholder. The following binds the “currentImage” variable (which we’ll work on next) to the image to display to the user. - -```html - -``` - -Open `about.ts` next and import the Camera library: - -```Javascript -import { Camera, CameraOptions } from '@awesome-cordova-plugins/camera'; -``` - -Next, define the “currentImage” variable and inject the Camera into this class via the constructor: - -```Javascript -export class AboutPage { - currentImage: any; - - constructor(public navCtrl: NavController, private camera: Camera) { -} -``` - -Finally, add the “takePicture” method, already wired up to execute once the camera button has been tapped: - -```Javascript -takePicture() { - const options: CameraOptions = { - quality: 100, - destinationType: this.camera.DestinationType.DATA_URL, - encodingType: this.camera.EncodingType.JPEG, - mediaType: this.camera.MediaType.PICTURE - } - - this.camera.getPicture(options).then((imageData) => { - this.currentImage = 'data:image/jpeg;base64,' + imageData; - }, (err) => { - // Handle error - console.log("Camera issue:" + err); - }); - } -``` - -Take notice: there’s no mention of iOS or Android! This is the awesome power of plugins: you use one API (`camera.getPicture()` in this case) and the plugin takes care of the platform differences for you. Write once, run everywhere `:)` - -Save this file then tap the Camera button in DevApp. Voila! The camera should open on your device. Once a photo has been taken, it displays on the Photo Gallery page. - -Finally, back up your changes to Appflow: - -```shell -git add . -git commit -m “added camera functionality” -git push ionic master -``` - -Next, we’ll cover how to transform the app into a photo gallery, as well as how to save the photos to your device! diff --git a/docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx b/docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx deleted file mode 100644 index ff1d1fcff85..00000000000 --- a/docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx +++ /dev/null @@ -1,193 +0,0 @@ -# Realtime App Updates with Appflow Live Updates - -As demonstrated so far, building web and mobile apps is quick and easy with the Ionic Framework. However, nothing disrupts rapid iteration faster than App Store delays. Fortunately, with Appflow’s Deploy feature, you can send live code changes directly to your users. Paired with seamless background updates, they are always upgraded to the latest version. - -Setting it up is quick and easy. For reference, continue to refer to [the part 3 folder](https://github.com/ionic-team/photo-gallery-tutorial-ionic3/tree/master/part3) on GitHub. First, install the Appflow JavaScript library: - -```shell -npm install @ionic/pro@latest --save -``` - -Then, add the Appflow plugin. Here’s the command to install it: - -```shell -$ ionic cordova plugin add cordova-plugin-ionic@latest --save ---variable APP_ID=YOUR_APP_ID --variable CHANNEL_NAME=YOUR_CHANNEL_NAME -``` - -There are two unique values to provide: your app id and channel name. Sign into Appflow, then find the App Id on your app’s dashboard: - -![The location of the App ID in the Appflow dashboard.](/img/guides/first-app-v3/app-id-location.png 'Appflow App ID Location') - -And we’ll just use “Master” as the channel name. Putting this together looks like: - -```shell -$ ionic cordova plugin add cordova-plugin-ionic@latest --save ---variable APP_ID=381533B9 --variable CHANNEL_NAME=Master -``` - -After this plugin has been added, you’ll notice that `config.xml` and `package.json` have been updated with your app’s details: - -```xml - - - - - - - - - -``` - -Next, modify `src/app/app.module.ts` to include the initialization of Appflow on app startup: - -```javascript -import { Pro } from '@ionic/pro'; - -Pro.init('YOUR_APP_ID', { - appVersion: 'APP_VERSION', -}); -``` - -As an example, this would look like: - -```javascript -Pro.init('381533B9', { - appVersion: '0.0.1', -}); -``` - -Next, push the code up to Appflow: - -```shell -git add . -git commit -m “adding Appflow” -git push ionic master -``` - -Next, create a local, native build of the app. - -## Android Builds - -Follow the [Android Setup instructions](../../../developing/android.mdx), which includes installing Java 8 and Android Studio on your machine. Then, in your Terminal run: - -```shell -ionic cordova build android --prod -``` - -This will generate a unsigned debug build (meaning the app can run on any Android device). - -## iOS Builds - -iOS is [a bit trickier to set up](../../../developing/ios.mdx) than Android and requires a Mac computer. Ensure XCode is updated to the latest version and set up a development team. Then, in your Terminal, run: - -```shell -ionic cordova build ios --prod -``` - -Then, continue to follow the [app store deployment instructions](../../../deployment/app-store.mdx) regarding signing certificates, etc. With a native version of your app built, let’s copy it to your device of choice. - -## Add the Native App to Your Local Device - -Now comes the fun part: testing out the native app on your device! For iOS, the easiest way (that works for both PC and Mac) involves using iTunes. Connect your iOS device, locate your IPA file, then drag and drop the IPA file from the file system onto your device in iTunes. The app will install immediately and be ready for use: - -
-
- -
-
- - -For Android testing, the easiest way across all OS platforms is to use [Android Studio](https://developer.android.com/studio/), Google’s official Android IDE. After downloading it, connect your Android device to your computer. On the Studio startup screen, select “Profile or debug APK”, then select the recently built APK file. - -In the upper right hand corner, click the Play button. Select your connected device, then click OK: - -
-
- -
-
- - -## Deploying Changes - -With Appflow Deploy, any JavaScript, HTML, or CSS changes can be pushed automatically to app users. Open the Photo Gallery app in your favorite code editor, then update the title of the Gallery page: - -```html - - - Photo Viewer - - -``` - -Next, push the code up to Appflow: - -```shell -$ git add . -$ git commit -m “change name to Photo Viewer” -$ git push ionic master -``` - -Log into the [Appflow dashboard](https://dashboard.ionicframework.com) and navigate to Deploy -> Builds. This newest commit begins to build immediately. Since we assigned the Appflow plugin to the Master branch (the one we always Git Push to), the Channel label will also point to this commit, effectively auto-deploying this change to all app users: - -![The Deploy Builds section in the Appflow dashboard.](/img/guides/first-app-v3/deploy-channel.png 'Appflow Deploy Builds') - -A Channel points to a specific JavaScript Build or Snapshot of your app that will be shared with devices listening to that channel for updates. You can change which Build a Channel points to whenever you’d like. - -Each time a user launches our Photo Gallery app, it will poll for updates from Appflow. If new code is available, the update is downloaded in the background. There are [a handful of ways](https://ionic.io/docs/appflow/deploy/api#update_method) to control how updates are performed, but by default they will be applied the next time the user closes then opens the app. - -When the latest Build has been successful, close your local copy of Photo Gallery app or put it in the background for 30 seconds (the [MIN_BACKGROUND_DURATION default](https://ionic.io/docs/appflow/deploy/api#min_background_duration)), then reopen it. The title of the Photo Gallery page should change from “Photo Gallery” to “Photo Viewer.” - -What if you deploy a change, then realize that there is a bug? Or perhaps you’re just not happy with the name “Photo Viewer?” No problem: Appflow Deploy makes it easy to roll back changes as well! - -On the Deploy Builds page, click the “Assign to Channel” button on the previous commit, then click “Deploy.” App users will be reverted to the previous version, and our “Photo Gallery” name has been restored. - -![The Deploy Builds section in Appflow with a commit labeled 'set name to Photo Gallery' being assigned to the master channel for rollback.](/img/guides/first-app-v3/deploy-revertChange.png 'Appflow Deploy Revert Change') - -This was just a taste of what you can do with Appflow Live Updates! You can also set up multiple deployment channels to send targeted updates to specific groups of users. Use it to run A/B tests, or target the distribution of updates by audience, geography, or test group. - -## Stuck on creating local native builds? - -Building native app binaries for Android and iOS can be painful. The tooling isn’t great, new OS versions often result in challenging upgrades, and creating consistent builds across your dev team can be frustrating. Fortunately, Appflow’s Package feature makes this easy: simply upload your iOS certificate and Android keystore files, then we take care of the rest! - -[Start packaging your app in the cloud](https://dashboard.ionicframework.com/settings/billing) along with 10,000 Ionic Deploys per month. - -Up next, we cover Appflow Monitoring - track your app errors in realtime. diff --git a/docs/developer-resources/guides/first-app-v3/theming.mdx b/docs/developer-resources/guides/first-app-v3/theming.mdx deleted file mode 100644 index 077186843fc..00000000000 --- a/docs/developer-resources/guides/first-app-v3/theming.mdx +++ /dev/null @@ -1,47 +0,0 @@ -# Make It Your Own! Ionic Theming - -Previously, we converted our single use Camera app into an epic photo gallery. Now, let’s explore how to make the photo gallery our own with Ionic theming. The visual design of the app is incredibly important - fortunately, Ionic provides a lot for us out-of-the-box. You can find the code for this in [the “part 3” folder](https://github.com/ionic-team/photo-gallery-tutorial-ionic3/tree/master/part3) on GitHub. - -Ionic has five default colors, defined as Sass variables, that can be used to change the color of its UI components: - -![Ionic's default Sass color variables for theming: 'primary", secondary, danger, light, and dark.](/img/guides/first-app-v3/v3-theming.png 'Default Ionic Sass Variables') - -You can customize each color further by supplying a base and contract property. Base acts as the background color and contrast acts as the text color for most components. This provides much more flexible control over your styles: - -![Code snippet showing customized Ionic Sass variables with additional twitter color base and contrast properties.](/img/guides/first-app-v3/v3-themeColors.png 'Customized Ionic Sass Variables') - -You can find these colors defined in `src/theme/variables.scss`. - -By changing these variables here and there, you can easily update the entire theme of the application! Try changing a few of them and watch the app update in DevApp. For example, change the default blue color for Primary to purple: - -```Css -$colors: ( - primary: #7044ff, -) -``` - -But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to: - -![Comparing the native look of an Ionic app on iOS and Android platforms.](/img/guides/first-app-v3/ion-lab-comparison.png 'Ionic Platform Specific Styles Comparison') - -In our app, this is clearly visible in how the header and the icons are styled. - -If you want consistency, you can tell Ionic to use the same mode regardless of platform. For example, to apply Material Design (Android’s platform style), set it globally in the App Module class. Open `src/app/app.module.ts`, then set the `mode` property: - -```Javascript -imports: [ - BrowserModule, - IonicModule.forRoot(MyApp, { - mode: "md" - }, null), - IonicStorageModule.forRoot() - ], -``` - -Now, the iOS version of our app has a Material Design skin! - -![An Ionic app with Material Design styling applied on an iOS device.](/img/guides/first-app-v3/ion-lab-md-styling.png 'Ionic Material Design Styling on iOS') - -Creating gorgeous-looking Ionic apps is easy with Sass variables and platform-specific styling. You now have everything you need to get started with Ionic. Go forth and build great apps! - -If you're interested in taking your Ionic apps to the next level, continue on with our exploration of Appflow next. diff --git a/docs/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx b/docs/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx deleted file mode 100644 index 858da2cc914..00000000000 --- a/docs/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx +++ /dev/null @@ -1,92 +0,0 @@ -# Track Bugs in Realtime with Ionic Monitoring - -Bugs happen, and can be hard to track down - especially with hundreds of possible combinations of mobile devices and operating systems. Appflow Monitoring allows you to track errors in your app on users’ phones and it sends them directly to you instantly, even if your code is minified! - -Reducing customer frustration by fixing major issues quickly in your production apps are a substantial part of providing a high quality app experience. Combined with Appflow Deploy, new updates can be rolled out quickly to address problems in real-time. - -To begin, let’s add a global error handler that will catch and report all unhandled exceptions that occur in the app. Open `src/app/app.module.ts`, then add two import statements: - -```javascript -import { ErrorHandler, Injectable, Injector } from '@angular/core'; -import { IonicErrorHandler } from 'ionic-angular'; -``` - -Next, create an error handler class calls the Monitoring service’s API whenever any errors have been encountered: - -```javascript -@Injectable() -export class MyErrorHandler implements ErrorHandler { - ionicErrorHandler: IonicErrorHandler; - - constructor(injector: Injector) { - try { - this.ionicErrorHandler = injector.get(IonicErrorHandler); - } catch (e) { - // Unable to get the IonicErrorHandler provider, ensure - // IonicErrorHandler has been added to the providers list below - } - } - - handleError(err: any): void { - Pro.monitoring.handleNewError(err); - - this.ionicErrorHandler && this.ionicErrorHandler.handleError(err); - } -} -``` - -Then, within the providers array, update IonicErrorHandler to MyErrorHandler: - -```javascript -{provide: ErrorHandler, useClass: MyErrorHandler}, -``` - -It should then look like: - -```javascript -providers: [ - // ... - IonicErrorHandler, - [{ provide: ErrorHandler, useClass: MyErrorHandler }], -]; -``` - -Next, let’s intentionally create a bug so we can demonstrate the power of Ionic Monitoring. Open `about.html` and rename the takePicture method to something that doesn’t exist, such as “takePhoto”: - -```html - -``` - -With this change in place, anytime a user taps on the Camera button, an exception will be thrown and sent to Ionic’s Monitoring service. - -Last, we need to need to create a Source Map for your app. This file makes it easy for Monitoring to pinpoint problems by providing stack traces that map back to the original, unminified TypeScript code. - -Sync the current version of the app by running the following: - -```shell -ionic monitoring syncmaps -``` - -With our intentional error in place, let’s try it out to find out what happens. Run your app locally: - -```shell -ionic serve -``` - -Tap on the Gallery tab, then the camera button. A runtime error should occur. In a browser, head over to the [Appflow dashboard](https://dashboard.ionicframework.com), then Monitor -> Monitoring. After a few minutes, the error should appear: - -![An event showing error 'takePhoto is not a function' with status 'New'.](/img/guides/first-app-v3/monitoring-event.png 'Ionic Monitoring Event Overview') - -Clicking on the event gives us lots of details surrounding what happened, such as a full stack trace. In this instance, the error occurred three times on Mac OS X in the Chrome web browser. - -![Detailed view of an event log displaying a TypeError stack trace and error details such as device, browser, and operating system.](/img/guides/first-app-v3/monitoring-details.png 'Detailed Ionic Monitoring Event Log') - -Given the proliferation of mobile devices and operating systems these days, this is immensely powerful. Armed with these details, we can hone in on the problem and fix it quickly. - -This is a TypeScript bug, meaning a fix can be released using Live Updates. Give it a try! - -- Revert the method back to “takePicture.” -- Push the fix using Git. Remember, “git push ionic master.” -- Roll out the fix using Live Updates from the Ionic dashboard. - -Supporting hundreds of mobile device types is so much easier with Appflow Monitoring. [Upgrade to the Appflow Developer plan today](https://dashboard.ionicframework.com/settings/billing) to get instant notification when bugs occur, save error history for sixty days (instead of seven), and unlock 10,000 live Deploy updates per month! diff --git a/docs/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx b/docs/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx deleted file mode 100644 index 5b70127be9c..00000000000 --- a/docs/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx +++ /dev/null @@ -1,202 +0,0 @@ -import DocsButton from '@components/page/native/DocsButton'; - -# Creating a Photo Gallery with Device Storage - -Last time, we successfully added the Camera plugin to the Tab2 page of our Tabs app. Currently, the photo is replaced each time a new one is taken. What if we wanted to display multiple photos together? Let’s create a photo gallery. You can follow along with the complete code for this [on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4). - -## Creating a Dedicated Photo Service - -From a terminal window, navigate to your Ionic project and run: - -```shell -ionic g service services/Photo -``` - -This creates a PhotoService class in a dedicated "services" folder: - -```Javascript -import { Injectable } from '@angular/core'; - -@Injectable({ - providedIn: 'root' -}) -export class PhotoService { - constructor() { } -} -``` - -Within this file, add a Photo class. The “data” property represents the base64 image data of a captured photo: - -```Javascript -class Photo { - data: any; -} -``` - -Then, create a Photos array to represent our photo gallery: - -```Javascript -export class PhotoService { - - public photos: Photo[] = []; - - constructor() { } -} -``` - -Back in `tab2.page.ts`, import PhotoService: - -```Javascript -import { PhotoService } from '../services/photo.service'; -``` - -Add it to the Constructor: - -```Javascript -constructor(private camera: Camera, public photoService: PhotoService) { } -``` - -Next, move all code pertaining to the Camera plugin to the PhotoService class. This includes the takePicture method, the Camera and CameraOptions imports, and the Tab2Page page constructor. - -Continuing on, we need to convert currentImage variable references to the new photos array. Start by adding the captured photo data into the photos array: - -```Javascript -this.camera.getPicture(options).then((imageData) => { - // Add new photo to gallery - this.photos.unshift({ - data: 'data:image/jpeg;base64,' + imageData - }); }, (err) => { - // Handle error - console.log("Camera issue: " + err); -}); -``` - -In `tab2.page.ts`, remove the currentImage variable and the reference to Camera in the constructor, leaving only PhotoService: - -```Javascript -export class Tab2Page { - constructor(public photoService: PhotoService) { } -} -``` - -Next, in `tab2.page.html`, remove the currentImage img tag. In its place, use an ion-grid component, which provides a great way to arrange elements on a page. In this case, we’ll use it to display 2 photos per row. - -```html - - - - - - - -``` - -Here, we loop through each photo in the PhotoServices photos array, adding a new column for each. Since an ion-row consists of 12 “blocks” of space, and we’re setting the size to 6 (`size="6"`), only 2 photos are displayed per row. - -Last, update the Fab button to call the PhotoService’s `takePicture` method: - -```Html - - - -``` - -Excellent! We now have a basic photo gallery working. - -## Saving photos to the device - -Having a working photo gallery is pretty cool, but you’ll likely notice that when the app is closed, the photos are lost forever. That’s no good, so let’s add the [Ionic Storage plugin](https://ionicframework.com/docs/storage/), as easy way to store key/value pairs and JSON objects. When running in a native app context, Storage will prioritize using SQLite, one of the most stable and widely used file-based databases. When running on the web or as a Progressive Web App, Storage will attempt to use IndexedDB, WebSQL, and localstorage, in that order. - -The Storage plugin works perfectly for our base64 image data. To begin, add the SQLite plugin for native: - -```shell -ionic cordova plugin add cordova-sqlite-storage -``` - -Next, add the JavaScript library for the web: - -```shell -npm install --save @ionic/storage -``` - -Last, import the Storage module and add it to the imports list in `app.module.ts`: - -```Javascript -import { IonicStorageModule } from '@ionic/storage'; - -@NgModule({ - declarations: [AppComponent], - entryComponents: [], - imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, - IonicStorageModule.forRoot() - ], - providers: [ - StatusBar, - SplashScreen, - Camera, - { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } - ], - bootstrap: [AppComponent] -}) -export class AppModule {} -``` - -It’s now ready to be used in our PhotoService class. Import it: - -```Javascript -import { Storage } from '@ionic/storage-angular'; -``` - -Then inject it via the constructor: - -```Javascript -constructor(private camera: Camera, private storage: Storage) { } -``` - -To add the capability to save photos, there’s only a couple steps left. Update the `takePicture()` method to save the entire photos array after each photo is taken using the storage.set method: - -```Javascript -this.camera.getPicture(options).then((imageData) => { - // Add new photo to gallery - this.photos.unshift({ - data: 'data:image/jpeg;base64,' + imageData - }); - - // Save all photos for later viewing - this.storage.set('photos', this.photos); -}, (err) => { - // Handle error - console.log("Camera issue: " + err); -}); -``` - -We still need to load the saved photos when the app is first opened. This is simple enough - retrieve the “photos” key then assign its value to the photos array: - -```Javascript -loadSaved() { - this.storage.get('photos').then((photos) => { - this.photos = photos || []; - }); -} -``` - -Over in the Tab2 page, call the loadSaved method once it begins loading: - -```Javascript -ngOnInit() { - this.photoService.loadSaved(); -} -``` - -Sweet! Photos are now saved to your device. To demonstrate that they are indeed being saved, force close DevApp, reopen it, and open the Tab2 page. Or, shake your device to have the Control Menu pop up, then tap “Exit preview.” Afterwards, reload this app to view the photos. - -Next up, we’ll cover how to apply a custom theme to an Ionic app. - -
- - Continue{' '} - - - - -
diff --git a/docs/developer-resources/guides/first-app-v4/intro.mdx b/docs/developer-resources/guides/first-app-v4/intro.mdx deleted file mode 100644 index a2481a35344..00000000000 --- a/docs/developer-resources/guides/first-app-v4/intro.mdx +++ /dev/null @@ -1,97 +0,0 @@ -# Your First Ionic App: Angular - -The great thing about Ionic is that with one codebase, you can build for any platform using familiar web tools and languages. Follow along as we create a working Photo Gallery. Here’s the before and after: - -![An Ionic app's transformation from a blank 'Tab Two' to a 'Photo Gallery' with images.](/img/guides/first-app-v3/gallery-combined.png 'Ionic App Before and After Photo Gallery') - -It’s easy to get started. Note that all code referenced in this guide can be [found on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4/). - -## Required Tools - -Download/install these right away to ensure an optimal Ionic development experience: - -- [Git](https://git-scm.com/downloads) for version control. -- **SSH client**, such as [PuTTy](https://putty.software/), for secure login to Appflow. -- **Node.js** for interacting with the Ionic ecosystem. [Download the LTS version](https://nodejs.org/en/). -- **A code editor** for... writing code! We are fans of [Visual Studio Code](https://code.visualstudio.com/). -- **Command-line terminal (CLI)**: FYI **Windows** users, for the best Ionic experience, we - recommend the built-in command line (cmd) or the Powershell CLI, running in Administrator mode. For **Mac/Linux** users, virtually any terminal will work. - -## Install Ionic and Cordova - -Run the following in the command line: - -```shell -npm install -g @ionic/cli cordova -``` - -:::note - -The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur. - -Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../../../developing/tips.mdx#resolving-permission-errors) for more information. - -::: - -## Create an App - -Next, create an Ionic Angular app using our “Tabs” app template: - -```shell -ionic start photo-gallery tabs -``` - -This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily! - -Next, change into the app folder: - -```shell -cd photo-gallery -``` - -That’s it! Now for the fun part - let’s run the app. - -## Run the App - -Run this command next: - -```shell -ionic serve -``` - -And voilà! Your Ionic app is now running in a web browser. Most of your app can be built right in the browser, greatly increasing development speed. - -## Photo Gallery!!! - -There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to add camera functionality. Let’s begin to transform this page into a Photo Gallery. Ionic features LiveReload, so when you make changes and save them, the app is updated immediately! - -![Animated GIF demonstrating the LiveReload feature in Ionic, showing real-time updates in the app after code changes.](/img/guides/first-app-v3/email-photogallery.gif 'Ionic LiveReload Feature Demonstration') - -Open the photo-gallery app folder in your favorite code editor of choice, then navigate to `/src/app/tab2/tab2.page.html`. It contains: - -```html - - - Tab Two - - - - -``` - -`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title. We put our app code into `ion-content`. In this case, it’s where we’ll add a button that opens the device’s camera and shows the image captured by the camera. But first, let’s start with something obvious: renaming the Tab Two page: - -```html -Photo Gallery -``` - -Next, open `src/app/tabs/tabs.page.html`. Change the label to “Gallery” and the icon name to “images”: - -```html - - - Gallery - -``` - -That’s just the start of all the cool things we can do with Ionic. Up next, we’ll deploy the app to your iOS or Android device, then continue building the photo gallery. diff --git a/docs/developer-resources/guides/first-app-v4/ios-android-camera.mdx b/docs/developer-resources/guides/first-app-v4/ios-android-camera.mdx deleted file mode 100644 index 8e1c8b15d11..00000000000 --- a/docs/developer-resources/guides/first-app-v4/ios-android-camera.mdx +++ /dev/null @@ -1,154 +0,0 @@ -# Android, iOS, and the Camera - Oh My! - -Previously, we got an Ionic app up and running locally in a web browser. Now, let’s get it onto your iOS or Android device, then start building the photo gallery feature. - -## Add Cordova iOS and Android Platforms - -Ionic leverages the open source [Cordova project](https://cordova.apache.org/docs/en/latest/guide/overview/) to provide native hardware support. We begin by adding the iOS and Android _platforms_ then will add specific _plugins_ like the Camera afterwards: - -```shell -$ ionic cordova platform add ios -$ ionic cordova platform add android -``` - -These commands will create a `config.xml` file, which is used to define Cordova iOS and Android settings. Cordova reads this file and applies each setting as it builds each native app binary. - -There are more steps to configure [iOS](../../../developing/ios.mdx) and [Android](../../../developing/android.mdx) native tooling. - -Much better! Now we can add the camera functionality. By the way, you can find reference code for this [on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4). - -Back in `tab2.page.html`, add the following: - -```html - - - - - - - - - -``` - -Save the file and watch - a camera button appears! Tap on it and notice that it doesn’t do anything. Let’s fix that next. - -## Add the Camera Dependencies via the CLI - -In order to use the Camera, we need to bring in its JavaScript and native library dependencies. Back over in your Terminal window, run the following command, which adds the JavaScript library to the project, thus exposing the Camera API in TypeScript code: - -```shell -npm install @awesome-cordova-plugins/camera -``` - -In `package.json`, you’ll notice a new JavaScript dependency has been added, with a version number similar to the following: - -`"@awesome-cordova-plugins/camera": "^5.4.0"` - -Next, run this command to add the native iOS and Android code, effectively allowing the Camera to work on a mobile device. For more info on how this works, read up on [Cordova](https://cordova.apache.org/docs/en/latest/guide/overview/) and [Ionic Native](https://ionicframework.com/docs/native). - -```shell -ionic cordova plugin add cordova-plugin-camera -``` - -The `config.xml` file is now updated with an entry similar to the following for the native camera code: - -```xml - -``` - -The next step is only required for iOS users. As of iOS 10, developers must provide a reason for why the app wishes to access the device camera. Add this inside the ios platform section () of `config.xml`: - -```xml - - - Used to take pictures - -``` - -## Add Camera plugin to Angular App Module - -There’s one more step we need to do since this is an Angular project: register the Camera in the App Module (`src/app/app.module.ts`). First, import the Camera module: - -```Javascript -import { Camera } from '@awesome-cordova-plugins/camera/ngx'; -``` - -Then, add it as a Provider: - -```Javascript -providers: [ - StatusBar, - SplashScreen, - Camera, - {provide: ErrorHandler, useClass: IonicErrorHandler} - ], -``` - -It can now be used on any of our App pages. - -## Add the Camera to the Gallery page - -Our camera button doesn’t do anything yet. Over in `tab2.page.html`, add a click handler to the button: - -```html - - - - - -``` - -Then, update the image placeholder. The following binds the “currentImage” variable (which we’ll work on next) to the image to display to the user. - -```html - -``` - -Open `tab2.page.ts` next and import the Camera library: - -```Javascript -import { Camera, CameraOptions } from '@awesome-cordova-plugins/camera/ngx'; -``` - -Next, define the “currentImage” variable and inject the Camera into this class via the constructor: - -```Javascript -export class Tab2Page { - currentImage: any; - - constructor(private camera: Camera) { } -} -``` - -Finally, add the “takePicture” method in `tab2.page.ts`. It is already wired up to execute once the camera button has been tapped: - -```Javascript -export class Tab2Page { - currentImage: any; - - constructor(private camera: Camera) { } - - takePicture() { - const options: CameraOptions = { - quality: 100, - destinationType: this.camera.DestinationType.DATA_URL, - encodingType: this.camera.EncodingType.JPEG, - mediaType: this.camera.MediaType.PICTURE - }; - - this.camera.getPicture(options).then((imageData) => { - this.currentImage = 'data:image/jpeg;base64,' + imageData; - }, (err) => { - // Handle error - console.log("Camera issue:" + err); - }); - } -} -``` - -Take notice: there’s no mention of iOS or Android! This is the awesome power of plugins: you use one API (`camera.getPicture()` in this case) and the plugin takes care of the platform differences for you. Write once, run everywhere. 😀 - -Save this file then tap the Camera button in DevApp. Voila! The camera should open on your device. Once a photo has been taken, it displays on the Photo Gallery page. - -Next, we’ll cover how to transform the app into a photo gallery, as well as how to save the photos to your device! diff --git a/docs/developer-resources/guides/first-app-v4/theming.mdx b/docs/developer-resources/guides/first-app-v4/theming.mdx deleted file mode 100644 index c55d591b308..00000000000 --- a/docs/developer-resources/guides/first-app-v4/theming.mdx +++ /dev/null @@ -1,56 +0,0 @@ -# Make It Your Own! Ionic Theming - -Previously, we converted our single use Camera app into an epic photo gallery. Now, let’s explore how to make the photo gallery our own with Ionic theming. The visual design of the app is incredibly important - fortunately, Ionic provides a lot for us out-of-the-box. - -Ionic has nine default colors, defined as CSS variables, that can be used to change the color of its UI components: - -![A chart showing Ionic's nine default colors with their hex codes.](/img/guides/first-app-v4/theming-defaults.png 'Ionic Default Color Palette') - -You can customize each color further by supplying a base, contrast, shade, and tint properties. These provide flexible control over your styles: - -![Table detailing the properties for customizing the primary color in Ionic, including base, contrast, shade, and tint.](/img/guides/first-app-v4/theming-properties.png 'Ionic Color Customization Properties') - -You can find these colors defined in `src/theme/variables.scss`. - -By changing these variables here and there, you can easily update the entire theme of the application! Try changing a few of them and watch the app update in DevApp. For example, change the default blue color for Primary to purple: - -```css -/** Ionic CSS Variables **/ -:root { - /** primary **/ - --ion-color-primary: #b36bff; - --ion-color-primary-rgb: 179, 107, 255; - --ion-color-primary-contrast: #000000; - --ion-color-primary-contrast-rgb: 0, 0, 0; - --ion-color-primary-shade: #9e5ee0; - --ion-color-primary-tint: #bb7aff; -} -``` - -The easiest and most powerful way to create custom color palettes for your app’s UI is Ionic's [Color Generator tool](../../../theming/color-generator.mdx). As you change a color’s hex values, the embedded demo app automatically reflects the new colors. When you've finished making changes, simply copy and paste the generated code directly into your Ionic project. - -But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to: - -![Comparing the native look of an Ionic app on iOS and Android platforms.](/img/guides/first-app-v3/ion-lab-comparison.png 'Ionic Platform Specific Styles Comparison') - -In our app, this is clearly visible in how the header and the icons are styled. - -If you want consistency, you can tell Ionic to use the same mode regardless of platform. For example, to apply Material Design (Android’s platform style), set it globally in the App Module class. Open `src/app/app.module.ts`, then set the `mode` property: - -```Javascript -imports: [ - BrowserModule, - IonicModule.forRoot({ - mode: "md" - }), - IonicStorageModule.forRoot() - ], -``` - -Now, the iOS version of our app has a Material Design skin! - -![An Ionic app with Material Design styling applied on an iOS device.](/img/guides/first-app-v3/ion-lab-md-styling.png 'Ionic Material Design Styling on iOS') - -Creating gorgeous-looking Ionic apps is easy with CSS variables and platform-specific styling. You now have everything you need to get started with Ionic. - -Go forth and build great apps! diff --git a/docs/developer-resources/posts.mdx b/docs/developer-resources/posts.mdx deleted file mode 100644 index a8c5b3f861c..00000000000 --- a/docs/developer-resources/posts.mdx +++ /dev/null @@ -1,77 +0,0 @@ ---- -sidebar_label: Posts ---- - -# Community Posts - -### [What's new in Ionic 5 - Migration and Free Starter](https://ionicthemes.com/tutorials/about/ionic5-tutorial-migration-and-starter) - -Take advantage of the new benefits from Ionic 5. In this guide we describe the main changes and show you how to migrate your applications from Ionic 4 to Ionic 5. For this post we created an Ionic 5 CRUD Contacts app that you can download for free to learn how to start using Ionic 5. - -### [Ionic Navigation and Angular Routing](https://ionicthemes.com/tutorials/about/ionic-navigation-and-routing-ultimate-guide) - -Learn how to master Routing and Navigation in Ionic Angular Apps as well as some usability tricks you can add to your apps to improve the user experience! - -### [Firebase Authentication Tutorial For Ionic Apps](https://ionicthemes.com/tutorials/about/firebase-authentication-in-ionic-framework-apps) - -Learn how to add Firebase Authentication to your Ionic 5 App. This tutorial explains step by step how to configure both the Firebase and the Ionic Apps to enable authentication with social providers such as Google, Facebook and Twitter and also with Email and Password. - -### [Native Cross Platform Web Apps with Ionic Capacitor](https://ionicthemes.com/tutorials/about/native-cross-platform-web-apps-with-ionic-capacitor) - -Ionic Capacitor introduction guide for beginners: history, motivation, usage and how to migrate your existing Cordova apps to Capacitor. - -### [Ionic Skeleton Loading Screens](https://ionicthemes.com/tutorials/about/improved-ux-for-ionic-apps-with-skeleton-loading-screens) - -UI Skeletons, Ghost Elements, Shell Elements? They are all the same! Think of them as cool content placeholders that are shown where the content will eventually be once it becomes available. In this guide you will learn the importance of adopting the App Shell pattern in your ionic apps and discuss how to implement it using Ionic and Angular. Also, we explain some advanced CSS techniques to take the UX to the next level. - -### [The Complete Guide To Progressive Web Apps with Ionic](https://ionicthemes.com/tutorials/about/the-complete-guide-to-progressive-web-apps-with-ionic4) - -Learn what Progressive Web Apps are, why you should consider them for your next project, and how easy is to build a complete and production ready PWA with Ionic. - -### [Mastering Web Components in Ionic](https://ionicthemes.com/tutorials/about/ionic-4-tutorial-mastering-web-components-in-ionic-4) - -Understanding the new component architecture in Ionic, including web components, shadow DOM, CSS 4 variables and Stencil. - -### [Forms and Validations in Ionic 5](https://ionicthemes.com/tutorials/about/forms-and-validation-in-ionic) - -Learn everything about Ionic Forms and input validations in Ionic Angular apps. - -### [Building a Ionic Firebase App step by step](https://ionicthemes.com/tutorials/about/building-a-ionic-firebase-app-step-by-step) - -Learn how to make a CRUD application using Ionic Framework, Cloud Firestore for the database, and Cloud Storage for image storage. - -### [Ionic and WordPress Integration using the WordPress REST API](https://ionicthemes.com/tutorials/about/ionic-wordpress-integration) - -Learn how to connect your Ionic app with your WordPress site using the WordPress REST API. - -### [Understanding Ionic 2: Imports](http://mcgivery.com/understanding-ionic-2-imports/) - -ES6/TS introduce a new way to bring in external code. Learn about Imports. - -### [Ionic 2 / Angular 2 Concepts](https://www.joshmorony.com/ionic-2-first-look-series-new-angular-2-concepts-syntax/) - -Familiarize yourself with some of the new concepts in Ionic 2 and Angular 2. - -### [Ionic, PouchDB, & SQLite For Storage](http://gonehybrid.com/how-to-use-pouchdb-sqlite-for-local-storage-in-ionic-2/) - -Simplify storage using PouchDB and Sqlite. - -### [Advanced Google Maps](https://www.joshmorony.com/creating-an-advanced-google-maps-component-in-ionic-2/) - -Go beyond adding a simple map to handling offline conditions and complex maps. - -### [Background Geolocation](https://www.joshmorony.com/adding-background-geolocation-to-an-ionic-2-application/) - -Learn how to add geolocation that can run in the background of your app. - -### [Taking Advantage of Observables](https://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html) - -Learn how to use observables in your Ionic 2 app. - -### [Using the Angular Router in ionic/angular 4](https://www.joshmorony.com/using-angular-routing-with-ionic-4/) - -Learn how to use the Angular Router in your `@ionic/angular` 4 app. - -### [Ionic 4 examples using Angular, Vue and React](https://ionicworkshop.com/posts/introduction-to-ionic-framework-angular-vue-react/) - -Learn how to use Ionic 4 with Angular, React and Vue. diff --git a/docs/developer-resources/tools.mdx b/docs/developer-resources/tools.mdx deleted file mode 100644 index c38ba90eef8..00000000000 --- a/docs/developer-resources/tools.mdx +++ /dev/null @@ -1,21 +0,0 @@ -# Tools - -### [Angular CLI](https://github.com/angular/angular-cli) - -Learn more about the power of the Angular CLI - -### [StackBlitz](https://stackblitz.com/) - -Quickly get started with a new Ionic app entirely in the browser! - -### [TypeScript](https://www.typescriptlang.org/) - -Check out the features that make working with TypeScript amazing. - -### [Glossary](../reference/glossary.mdx) - -A list of common terms you'll encounter while developing in Ionic. - -### [Starter Apps](https://ionicthemes.com) - -Ionic Starter Apps to speed up and improve your app development. diff --git a/docs/developer-resources/videos.mdx b/docs/developer-resources/videos.mdx deleted file mode 100644 index bdc0a784d25..00000000000 --- a/docs/developer-resources/videos.mdx +++ /dev/null @@ -1,21 +0,0 @@ -# Videos - -### [Ionic 2 Crash Course](https://www.youtube.com/watch?v=O2WiI9QrS5s&feature=youtu.be) - -A quick introduction to Ionic 2 and how to build your first app. - -### [Ionic & Async](https://blog.ionicframework.com/screencast-ionic-async/) - -Learn how to coordinate multiple events in a timely manner. - -### [Building a TODO app in Ionic 2](http://www.joshmorony.com/build-a-todo-app-from-scratch-with-ionic-2-video-tutorial/) - -Learn how to build out an entire Ionic 2 app. - -### [Angular Connect: Ionic 2](https://www.youtube.com/watch?v=bAlydPwFONY) - -Dive into some of the ideas and goals behind Ionic 2. - -### [Ionic & Typings](https://blog.ionicframework.com/ionic-and-typings/) - -Learn how to add typings for libraries you are using in your Ionic 2 app. diff --git a/docs/intro/first-app.mdx b/docs/intro/first-app.mdx deleted file mode 100644 index 3fc9be2b1fd..00000000000 --- a/docs/intro/first-app.mdx +++ /dev/null @@ -1,24 +0,0 @@ ---- -hide_table_of_contents: true ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsCards from '@components/global/DocsCards'; - -# Build Your First App Tutorial - -Pick the JavaScript framework you plan to use while building your Ionic app: - - - -

A complete guide to get you up to speed with the basics of building Ionic apps with Angular.

- - - -

A complete guide to get you up to speed with the basics of building Ionic apps with React.

- - - -

A complete guide to get you up to speed with the basics of building Ionic apps with Vue.

- - diff --git a/docs/test/page1.mdx b/docs/test/page1.mdx deleted file mode 100644 index cd5b72410d0..00000000000 --- a/docs/test/page1.mdx +++ /dev/null @@ -1,3 +0,0 @@ -# Testing Page 1 - -This is Testing page 1, Get to Testing Page 2 [here](page2.mdx). diff --git a/docs/test/page2.mdx b/docs/test/page2.mdx deleted file mode 100644 index 5ebdef8dca0..00000000000 --- a/docs/test/page2.mdx +++ /dev/null @@ -1,3 +0,0 @@ -# Testing Page 2 - -This is Testing page 2, Get to Testing Page 1 [here](page1.mdx). diff --git a/scripts/bak/api-ja.mjs b/scripts/bak/api-ja.mjs deleted file mode 100644 index ecfced1d4d8..00000000000 --- a/scripts/bak/api-ja.mjs +++ /dev/null @@ -1,248 +0,0 @@ -import { resolve, join } from 'node:path'; -import fetch from 'node-fetch'; -import { existsSync, writeFileSync } from 'fs'; -import overrides from './data/meta-override.json' with { type: 'json' }; -import * as utils from './utils.mjs'; - -const apiOverrides = overrides.api; - -const DEMOS_PATH = resolve('static/demos'); -let COMPONENT_LINK_REGEXP; - -(async function () { - const response = await fetch( - 'https://raw.githubusercontent.com/ionic-team/ionic-docs/translation/jp/scripts/data/translated-api.json' - ); - const { components } = await response.json(); - - const names = components.map((component) => component.tag.slice(4)); - // matches all relative markdown links to a component, e.g. (../button) - COMPONENT_LINK_REGEXP = new RegExp(`\\(../(${names.join('|')})/?(#[^)]+)?\\)`, 'g'); - - components.map(writePage); -})(); - -function writePage(page) { - let data = [ - renderFrontmatter(page), - renderReadme(page), - renderUsage(page), - renderProperties(page), - renderEvents(page), - renderMethods(page), - renderParts(page), - renderCustomProps(page), - renderSlots(page), - ].join(''); - - // fix relative links, e.g. (../button) -> (button.md) - data = data.replace(COMPONENT_LINK_REGEXP, '($1.md$2)'); - - const path = `i18n/ja/docusaurus-plugin-content-docs/current/api/${page.tag.slice(4)}.md`; - writeFileSync(path, data); -} - -function renderFrontmatter({ tag }) { - const frontmatter = { - title: tag, - }; - - const demoPath = `api/${tag.slice(4)}/index.html`; - if (existsSync(join(DEMOS_PATH, demoPath))) { - frontmatter.demoUrl = `/docs/demos/${demoPath}`; - frontmatter.demoSourceUrl = `https://github.com/ionic-team/ionic-docs/tree/main/static/demos/${demoPath}`; - } - - return `--- -${Object.entries(frontmatter) - .map(([key, value]) => `${key}: ${typeof value === 'string' ? `"${value.replace('"', '\\"')}"` : value}`) - .join('\n')} ---- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -${utils.getHeadTag(apiOverrides[tag])} -`; -} - -function renderReadme({ readme, encapsulation }) { - if (!readme) { - return ` -import EncapsulationPill from '@components/page/api/EncapsulationPill'; - -${encapsulation !== 'none' ? `` : ''} - - -`; - } - - const endIndex = readme.indexOf('\n'); - - const title = readme.substring(0, endIndex); - const rest = readme.substring(endIndex); - - const addAdmonitions = (text) => - text.replace(/\n\n>/gm, '\n\n:::note').replace(/:::note(.*?)\n(#|\n|^)/gm, ':::note\n$1\n:::\n\n$2'); - - return ` -import EncapsulationPill from '@components/page/api/EncapsulationPill'; - -${encapsulation !== 'none' ? `` : ''} - - -${addAdmonitions(rest)} - `; -} - -function renderUsage({ usage }) { - function capitalizeFirstLetter(string) { - return string.charAt(0).toUpperCase() + string.slice(1); - } - - const keys = Object.keys(usage); - - if (keys.length === 0) { - return ''; - } - - if (keys.length === 1) { - return ` -## Usage - -${usage[keys[0]]} -`; - } - - return ` -## Usage - - `{ value: '${key}', label: '${capitalizeFirstLetter(key)}' }`) - .join(', ')}]}> - -${Object.entries(usage) - .map( - ([key, value]) => ` - - -${value} - - -` - ) - .join('\n')} - -`; -} - -function renderProperties({ props: properties }) { - if (properties.length === 0) { - return ''; - } - - // NOTE: replaces | with U+FF5C since MDX renders \| in tables incorrectly - return ` -## Properties - -${properties - .map( - (prop) => ` -### ${prop.name} - -| | | -| --- | --- | -| **Description** | ${prop.docs.split('\n').join('
')} | -| **Attribute** | \`${prop.attr}\` | -| **Type** | \`${prop.type.replace(/\|/g, '\uff5c')}\` | -| **Default** | \`${prop.default}\` | - -` - ) - .join('\n')} -`; -} - -function renderEvents({ events }) { - if (events.length === 0) { - return ''; - } - - return ` -## Events - -| Name | Description | -| --- | --- | -${events.map((event) => `| \`${event.event}\` | ${event.docs} |`).join('\n')} - -`; -} - -function renderMethods({ methods }) { - if (methods.length === 0) { - return ''; - } - - // NOTE: replaces | with U+FF5C since MDX renders \| in tables incorrectly - return ` -## Methods - -${methods - .map( - (method) => ` -### ${method.name} - -| | | -| --- | --- | -| **Description** | ${method.docs.split('\n').join('
')} | -| **Signature** | \`${method.signature.replace(/\|/g, '\uff5c')}\` | -` - ) - .join('\n')} - -`; -} - -function renderParts({ parts }) { - if (parts.length === 0) { - return ''; - } - - return ` -## CSS Shadow Parts - -| Name | Description | -| --- | --- | -${parts.map((prop) => `| \`${prop.name}\` | ${prop.docs} |`).join('\n')} - -`; -} - -function renderCustomProps({ styles: customProps }) { - if (customProps.length === 0) { - return ''; - } - - return ` -## CSS Custom Properties - -| Name | Description | -| --- | --- | -${customProps.map((prop) => `| \`${prop.name}\` | ${prop.docs} |`).join('\n')} - -`; -} - -function renderSlots({ slots }) { - if (slots.length === 0) { - return ''; - } - - return ` -## Slots - -| Name | Description | -| --- | --- | -${slots.map((slot) => `| \`${slot.name}\` | ${slot.docs} |`).join('\n')} - -`; -} diff --git a/scripts/bak/build-all/index.ts b/scripts/bak/build-all/index.ts deleted file mode 100644 index bcb80ceeb39..00000000000 --- a/scripts/bak/build-all/index.ts +++ /dev/null @@ -1,27 +0,0 @@ -import Listr from 'listr'; - -import buildData from '../build-data'; -import buildMenus from '../build-menus'; -import buildPages from '../build-pages'; - -const tasks = new Listr({ collapse: false } as any); - -tasks.add({ - title: 'Data', - task: () => buildData -}); - -tasks.add({ - title: 'Pages', - task: () => buildPages -}); - -tasks.add({ - title: 'Menus', - task: () => buildMenus -}); - -tasks.run().catch(err => { - console.error(err); - process.exit(1); -}); diff --git a/scripts/bak/build-data/api-reference.ts b/scripts/bak/build-data/api-reference.ts deleted file mode 100644 index 63b3b89dc82..00000000000 --- a/scripts/bak/build-data/api-reference.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { components } from '@ionic/docs/core.json'; -import { outputJson } from 'fs-extra'; -import { resolve } from 'path'; - -const OUTPUT_PATH = resolve( - __dirname, - '../../src/components/page/data/api-reference.json' -); - -const reference = components.map((component: any) => [ - component.tag, - `/docs/api/${component.tag.slice(4)}` -]); - -export default { - title: 'Build API reference data', - task: () => outputJson(OUTPUT_PATH, reference, { spaces: 2 }) -}; diff --git a/scripts/bak/build-data/file-contributors.ts b/scripts/bak/build-data/file-contributors.ts deleted file mode 100644 index 4008dd4fe3b..00000000000 --- a/scripts/bak/build-data/file-contributors.ts +++ /dev/null @@ -1,61 +0,0 @@ -import dotenv from 'dotenv'; -import { outputJson } from 'fs-extra'; -import fetch from 'node-fetch'; -import { resolve } from 'path'; -import url from 'url'; - -dotenv.config(); - -const OUTPUT_PATH = resolve( - __dirname, - '../data/github-commits.json' -); - -export default { - title: 'Getting a list of past commits', - task: async (_: any, task: any) => { - const History = await getAllGHCommits(task); - if (Object.keys(History).length > 0) { - outputJson(OUTPUT_PATH, History, { spaces: 2 }); - } - } -}; - -const getAllGHCommits = async (task: any, page = 1) => { - try { - task.output = `Getting commits: ${page * 100 - 99} - ${page * 100}`; - const request = await fetch( - url.format({ - protocol: 'https', - hostname: 'api.github.com', - pathname: 'repos/ionic-team/ionic-docs/commits', - query: { - per_page: 100, - page - } - }), { - headers: { - 'Authorization': process.env.GITHUB_TOKEN !== undefined ? `token ${process.env.GITHUB_TOKEN}` : '' - } - } - ); - - let commits = await request.json().then(list => list.reduce((obj: any, commit: any) => { - obj[commit.sha] = { - id: commit.author.login, - avatar: commit.author.avatar_url, - time: commit.commit.committer.date - }; - return obj; - }, {})); - - // recursively get more commits if there are more to get, limit 2k - if (Object.keys(commits).length === 100 && page < 20) { - commits = { ...commits, ...await getAllGHCommits(task, page + 1) }; - } - - return commits; - } catch { - return {}; - } -}; diff --git a/scripts/bak/build-data/index.ts b/scripts/bak/build-data/index.ts deleted file mode 100644 index e3659610882..00000000000 --- a/scripts/bak/build-data/index.ts +++ /dev/null @@ -1,24 +0,0 @@ -import Listr from 'listr'; - -import buildApiReference from './api-reference'; -// import buildContributors from './file-contributors'; -import buildReleaseNotes from './release-notes'; -import buildSearchIndex from './search-index'; - -const tasks = new Listr([ - buildApiReference, - // buildContributors, - buildReleaseNotes, - buildSearchIndex, -], - // { renderer: 'verbose' } -); - -export default tasks; - -if (!module.parent) { - tasks.run().catch(err => { - console.error(err); - process.exit(1); - }); -} diff --git a/scripts/bak/build-data/search-index.ts b/scripts/bak/build-data/search-index.ts deleted file mode 100644 index e4500361a5b..00000000000 --- a/scripts/bak/build-data/search-index.ts +++ /dev/null @@ -1,44 +0,0 @@ -import glob from 'fast-glob'; -import { outputJson, readJson } from 'fs-extra'; -import { resolve } from 'path'; - -const PAGES_PATH = resolve(__dirname, '../../src/pages'); -const INDEX_PATH = resolve(__dirname, '../../src/components/search/data/index.json'); - -export default { - title: 'Build search index', - task: () => buildIndex(PAGES_PATH), - skip: () => true -}; - -const buildIndex = async (dir: any) => { - const paths = await getPaths(dir); - const records = await Promise.all(paths.map(toRecord)); - return outputJson( - INDEX_PATH, - records, - { spaces: 2 } - ); -}; - -const toRecord = async (path: any) => { - const { title } = await readJson(path); - const href = toHref(path); - return { - title, - href, - type: 'page' - }; -}; - -const getPaths = (cwd: any) => { - return glob('**/*.json', { - absolute: true, - cwd - }); -}; - -const toHref = (path: string) => { - const [, page] = /\/pages\/(.+)\.json$/.exec(path) ?? []; - return `/docs/${page}`; -}; diff --git a/scripts/bak/build-menus/index.ts b/scripts/bak/build-menus/index.ts deleted file mode 100644 index e145f73c7ad..00000000000 --- a/scripts/bak/build-menus/index.ts +++ /dev/null @@ -1,49 +0,0 @@ -import fs from 'fs-extra'; -import Listr from 'listr'; -import { join, resolve } from 'path'; - -import { keyBy, slugify } from '../../src/utils'; -import { commands } from '../data/cli.json'; -import plugins from '../data/native.json'; - -const MENU_DATA_DIR = resolve(__dirname, '../../src/components/menu/data'); - -const cliCommandMenu = keyBy( - commands, item => item.name.slice(6), item => `/docs/cli/commands/${slugify(item.name.slice(6))}` -); - -const nativePluginMenu = keyBy( - plugins, item => item.displayName.trim(), item => `/docs/native/${slugify(item.packageName.slice(14))}` -); - -const externalNativePlugins = { - 'Google Maps': 'https://github.com/ionic-team/ionic-native-google-maps' -}; - -const tasks = new Listr([ - { - title: 'Build CLI command menu', - task: () => fs.outputJSON( - join(MENU_DATA_DIR, 'cli-commands.json'), - cliCommandMenu, - { spaces: 2 } - ) - }, - { - title: 'Build native plugins menu', - task: () => fs.outputJSON( - join(MENU_DATA_DIR, 'native-plugins.json'), - { ...nativePluginMenu, ...externalNativePlugins }, - { spaces: 2 } - ) - } -]); - -export default tasks; - -if (!module.parent) { - tasks.run().catch(err => { - console.error(err); - process.exit(1); - }); -} diff --git a/scripts/bak/build-pages/html-to-hypertext-data.ts b/scripts/bak/build-pages/html-to-hypertext-data.ts deleted file mode 100644 index 5908df2ea17..00000000000 --- a/scripts/bak/build-pages/html-to-hypertext-data.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { createDocument } from '@stencil/core/mock-doc'; - -export const convertHtmlToHypertextData = (html: string): any => { - const doc = createDocument(); - const div = doc.createElement('div'); - div.innerHTML = html; - return convertElementToHypertextData(div); -}; - -const convertElementToHypertextData = (node: any): any => { - const data = []; - - if (node.nodeType === 1) { - let tag = node.tagName.toLowerCase(); - - if (tagBlacklist.includes(tag)) { - tag = 'template'; - } - - data.push(tag); - - if (node.attributes.length > 0) { - const attrs: { [key: string]: any; } = {}; - for (let j = 0; j < node.attributes.length; j++) { - const attr = node.attributes.item(j); - attrs[attr.nodeName] = attr.nodeValue; - } - data.push(attrs); - - } else { - data.push(null); - } - - for (const child of node.childNodes) { - data.push(convertElementToHypertextData(child)); - } - - return data; - - } else if (node.nodeType === 3) { - return node.textContent; - } - - return ''; -}; - -const tagBlacklist = ['script', 'link', 'meta', 'object', 'head', 'html', 'body']; diff --git a/scripts/bak/build-pages/index.ts b/scripts/bak/build-pages/index.ts deleted file mode 100644 index 3a16c320bb2..00000000000 --- a/scripts/bak/build-pages/index.ts +++ /dev/null @@ -1,145 +0,0 @@ -import { createDocument } from '@stencil/core/mock-doc'; -import fs from 'fs-extra'; -import Listr from 'listr'; -import { resolve } from 'path'; - -import { slugify } from '../../src/utils'; - -import { convertHtmlToHypertextData } from './html-to-hypertext-data'; -import API from './page-types/api'; -import CLI from './page-types/cli'; -import Native from './page-types/native'; -import Static, { ToStaticPageOptions, toPage as toStaticPage } from './page-types/static'; - -const tasks = new Listr( - // { renderer: 'verbose' } -); -tasks.add(Static); -tasks.add(API); -tasks.add(CLI); -tasks.add(Native); -export default tasks; - -let listrStatus: any = null; - -if (!module.parent) { - tasks.run().catch(err => { - console.error(err); - process.exit(1); - }); -} - -export const PAGES_DIR = resolve(__dirname, '../../src/pages'); - -export interface Page { - title: string; - path: string; - body: string; - skipIntros?: boolean; - [key: string]: any; -} - -export type PageGetter = (status?: any) => Promise; - -export const buildPages = async (getter: PageGetter, status?: any) => { - // if not passed a listr status var, just set the output of an unused object - // might be helpful for debugging - listrStatus = status || {}; - listrStatus.output = 'Parsing Markdown'; - const pages = await getter(); - listrStatus.output = 'Optimizing'; - return Promise.all( - pages - .map(patchBody) - .map(updatePageHtmlToHypertext) - .map(writePage) - ); -}; - -export const buildStaticPage = async (path: string, options: ToStaticPageOptions = {}) => { - const page = await toStaticPage(path, options); - return writePage(updatePageHtmlToHypertext(patchBody(page))); -}; - -const patchBody = (page: Page): Page => { - const body = createDocument(page.body).body; - - const h1 = body.querySelector('h1'); - if (h1 !== null && h1.textContent !== null) { - page.title = page.title || h1.textContent.trim(); - h1.remove(); - } - - if (!page.skipIntros) { - const children: any[] = Array.from(body.children); - for (const child of children) { - if (child.tagName === 'P') { - child.classList.add('intro'); - } else { - break; - } - } - } - - const headings = Array.from(body.querySelectorAll('h2'), (heading: any) => ({ - text: heading.textContent.trim(), - href: `#${heading.getAttribute('id')}` - })); - - // remove /docs/ and language tag - const prefix = /^\/docs\/([a-z]{2}\b)?/; - const pageClass = `page-${slugify(page.path.replace(prefix, ''))}`; - - const [, language = 'en'] = prefix.exec(page.path) || []; - - if (language !== 'en') { - if (page.previousUrl) { - page.previousUrl = page.previousUrl.replace(prefix, `/docs/${language}/`); - } - if (page.nextUrl) { - page.nextUrl = page.nextUrl.replace(prefix, `/docs/${language}/`); - } - } - - return { - ...page, - body: body.innerHTML, - headings, - pageClass - }; -}; - -export const updatePageHtmlToHypertext = (page: Page) => { - page.body = convertHtmlToHypertextData(page.body); - if (page.docs) { - page.docs = convertHtmlToHypertextData(page.docs); - } - if (page.summary) { - page.summary = convertHtmlToHypertextData(page.summary); - } - if (page.codeUsage) { - page.codeUsage = convertHtmlToHypertextData(page.codeUsage); - } - if (page.usage) { - const hypertextUsage: { [key: string]: any } = {}; - Object.keys(page.usage).forEach(key => { - const usageContent = page.usage[key]; - hypertextUsage[key] = convertHtmlToHypertextData(usageContent); - }); - page.usage = hypertextUsage; - } - return page; -}; - -const writePage = (page: Page): Promise => { - if (listrStatus && listrStatus._task && listrStatus._task.output !== 'Writing Pages') { - listrStatus.output = 'Writing Pages'; - } - return fs.outputJson(toFilePath(page.path), page, { - spaces: 2 - }); -}; - -const toFilePath = (urlPath: string) => { - return `${resolve(PAGES_DIR, urlPath.replace(/.*(\/docs\/|\/pages\/)/, '') || 'index')}.json`; -}; diff --git a/scripts/bak/build-pages/markdown-renderer/code.ts b/scripts/bak/build-pages/markdown-renderer/code.ts deleted file mode 100644 index c2cb69350f0..00000000000 --- a/scripts/bak/build-pages/markdown-renderer/code.ts +++ /dev/null @@ -1,51 +0,0 @@ -import Prism from 'prismjs'; -const loadLanguages = require('prismjs/components/'); // tslint:disable-line - -export default (code: string, info?: string) => { - const [lang] = info !== undefined ? info.split(/\s+/).map(s => s.toLowerCase()) : [null]; - const isShell = lang !== null ? shells.includes(lang) : false; - const language = isShell ? 'shell' : lang; - - // tslint:disable-next-line - if (!language || Prism.languages[language] === undefined) { - return ` - - 
${escape(code)}
- -`; - } - - return ` - - 
${Prism.highlight(code, Prism.languages[language], language)}
- -`; -}; - -loadLanguages([ - 'bash', - 'json', - 'tsx', - 'typescript', - 'scss' -]); - -// `shell` is an alias of `bash`, so we have to extend `bash`. -Prism.languages.bash['prompt'] = /^\s*[\$#]\s+/gm; - -const shells = [ - 'shell', - 'bash', - 'sh' -]; - -const escape = (code: string) => - code.replace(/[&<>"']/g, char => escapeMap[char]); - -const escapeMap: { [key: string]: string; } = { - '&': '&', - '<': '<', - '>': '>', - '"': '"', - '\'': ''' -}; diff --git a/scripts/bak/build-pages/markdown-renderer/heading.ts b/scripts/bak/build-pages/markdown-renderer/heading.ts deleted file mode 100644 index df68b5e8d04..00000000000 --- a/scripts/bak/build-pages/markdown-renderer/heading.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { createDocument } from '@stencil/core/mock-doc'; - -import { slugify } from '../../../src/utils'; - -export default (text: string, level: number) => { - // TODO: use mockDoc createFragment() once it's exported - const doc = createDocument(text); - const { textContent } = doc.body; - - let hash; - if (textContent !== null) { - hash = slugify(textContent); - } - - return ` - - ${text} - - `; -}; diff --git a/scripts/bak/build-pages/markdown-renderer/index.ts b/scripts/bak/build-pages/markdown-renderer/index.ts deleted file mode 100644 index abeece2e5ac..00000000000 --- a/scripts/bak/build-pages/markdown-renderer/index.ts +++ /dev/null @@ -1,30 +0,0 @@ -import marked from 'marked'; -import { resolve } from 'url'; - -import code from './code'; -import heading from './heading'; - -const hasTrailingSlash = /\/$/; -const isInternal = /^\/docs\/.*/; -const isV3 = /^\/docs\/v3\//; - -const renderer = new marked.Renderer(); -renderer.heading = heading; -renderer.code = code; -renderer.link = function(href: string | null, title: string | null, text: string) { - const { baseUrl } = this.options; - - if (baseUrl !== undefined && href !== null) { - href = resolve(hasTrailingSlash.test(baseUrl) ? baseUrl : `${baseUrl}/`, href); - } - - if (href !== null && isInternal.test(href) && !isV3.test(href)) { - return `${text}`; - } - - return `${text}`; -}; - -export default (markdown: string, baseUrl?: string) => { - return marked(markdown, { baseUrl, renderer }); -}; diff --git a/scripts/bak/build-pages/page-types/api.ts b/scripts/bak/build-pages/page-types/api.ts deleted file mode 100644 index cdb065eff26..00000000000 --- a/scripts/bak/build-pages/page-types/api.ts +++ /dev/null @@ -1,83 +0,0 @@ -import { components } from '@ionic/docs/core.json'; -import fs from 'fs-extra'; -import { join, resolve } from 'path'; - -import metaOverride from '../../data/meta-override.json'; -import { - Page, - buildPages -} from '../index'; -import markdownRenderer from '../markdown-renderer'; - -export default { - title: 'Build API pages', - task: () => buildPages(getAPIPages) -}; - -export interface MetaInfo { - [index: string]: any; - title?: string; - description?: string; -} - -const apiMetaInfo: MetaInfo = metaOverride.api; - -const getAPIPages = async (): Promise => { - const pages = components.map(async component => { - const title = component.tag; - const path = `/docs/api/${title.slice(4)}`; - const demoUrl = await getDemoUrl(component); - const { readme, usage, props, methods, ...contents } = component; - - const meta = { - title: `${component.tag}: Ionic Framework API Docs`, - description: `The ${component.tag} component is one of many Ionic Framework components used to build apps for Android, iOS, and Progressive Web Apps` - }; - - if (apiMetaInfo[component.tag]) { - if (apiMetaInfo[component.tag].title) { - meta.title = apiMetaInfo[component.tag].title; - } - if (apiMetaInfo[component.tag].description) { - meta.description = apiMetaInfo[component.tag].description; - } - } - - return { - title, - path, - ...demoUrl, - body: markdownRenderer(readme, path), - usage: renderUsage(usage, path), - props: renderDocsKey(props, path), - methods: renderDocsKey(methods, path), - template: 'api', - meta, - ...contents - }; - }); - return Promise.all(pages); -}; - -const renderUsage = (usage: any, baseUrl: any) => Object.keys(usage).reduce((out: any, key: any) => { - out[key] = markdownRenderer(usage[key], baseUrl); - return out; -}, {}); - -const renderDocsKey = (items: any, baseUrl: any) => items.map((item: any) => ({ - ...item, - docs: markdownRenderer(item.docs, baseUrl) -})); - -const DEMOS_PATH = resolve(__dirname, '../../../src/demos'); - -const getDemoUrl = async (component: any) => { - const demoPath = `api/${component.tag.slice(4)}/index.html`; - const hasDemo = await fs.pathExists(join(DEMOS_PATH, demoPath)); - if (hasDemo) { - return { - demoUrl: `/docs/demos/${demoPath}`, - demoSourceUrl: `https://github.com/ionic-team/ionic-docs/tree/master/src/demos/${demoPath}` - }; - } -}; diff --git a/scripts/bak/build-pages/page-types/cli.ts b/scripts/bak/build-pages/page-types/cli.ts deleted file mode 100644 index c001ac036d8..00000000000 --- a/scripts/bak/build-pages/page-types/cli.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { commands } from '../../data/cli.json'; -import { - Page, - buildPages -} from '../index'; -import renderMarkdown from '../markdown-renderer'; - -import metaOverride from '../../data/meta-override.json'; -import { MetaInfo } from './api'; - -const cliMetaInfo: MetaInfo = metaOverride.cli; - -export default { - title: 'Build CLI pages', - task: () => buildPages(getCLIPages) -}; - -const getCLIPages = async (): Promise => { - return commands.map(command => { - const { name, description, summary, inputs, options, ...rest } = command; - - const shortName = name.slice(6).replace(/\s/g, '-'); - - return { - title: name, - body: renderMarkdown(description), - path: `/docs/cli/commands/${shortName}`, - summary: renderMarkdown(summary), - inputs: renderInputs(inputs), - options: renderOptions(options), - skipIntros: true, - template: 'cli', - meta: { - title: cliMetaInfo[shortName]?.title || `${name}: ${summary}`, - description: cliMetaInfo[shortName]?.description || summary - }, - ...rest - }; - }); -}; - -const renderInputs = (inputs: any) => inputs.map((input: any) => ({ - ...input, - summary: renderMarkdown(input.summary), -})); - -const renderOptions = (options: any) => options.map((option: any) => ({ - ...option, - summary: renderMarkdown(option.summary), -})); diff --git a/scripts/bak/build-pages/page-types/native.ts b/scripts/bak/build-pages/page-types/native.ts deleted file mode 100644 index 112afb45f1b..00000000000 --- a/scripts/bak/build-pages/page-types/native.ts +++ /dev/null @@ -1,48 +0,0 @@ -import plugins from '../../data/native.json'; -import { - Page, - buildPages -} from '../index'; -import renderMarkdown from '../markdown-renderer'; - -import metaOverride from '../../data/meta-override.json'; -import { MetaInfo } from './api'; - -export default { - title: 'Build native pages', - task: () => buildPages(getNativePages) -}; - -const nativeMetaInfo: MetaInfo = metaOverride.native; - -const getNativePages = async (): Promise => { - return plugins.map(plugin => { - const title = plugin.displayName.trim(); - const name = plugin.packageName.slice(14); - const path = `/docs/native/${name}`; - const { premierSlug, capacitorIncompatible, description, usage, repo, platforms } = plugin; - - const meta: { title?: string, description?: string} = {}; - const { title: metaTitle, description: metaDescription } = nativeMetaInfo[name] || {}; - if (metaTitle) { meta.title = metaTitle} - if (metaDescription) { meta.description = metaDescription } - - return { - title, - meta: { - description: description.trim().split('\n')[0], - ...meta - }, - path, - body: renderMarkdown(description), - repo, - platforms, - codeUsage: usage !== undefined ? renderMarkdown(usage) : null, - package: plugin.packageName, - cordova: plugin.cordovaPlugin.name, - capacitorIncompatible: capacitorIncompatible ? capacitorIncompatible : false, - premierSlug: premierSlug !== undefined ? premierSlug : null, - template: 'native' - }; - }); -}; diff --git a/scripts/bak/build-pages/page-types/static.ts b/scripts/bak/build-pages/page-types/static.ts deleted file mode 100644 index 61d0741c372..00000000000 --- a/scripts/bak/build-pages/page-types/static.ts +++ /dev/null @@ -1,92 +0,0 @@ -import glob from 'fast-glob'; -import frontMatter, { FrontMatterResult } from 'front-matter'; -import fs from 'fs-extra'; -import moment from 'moment'; -import simplegit from 'simple-git/promise'; - -import * as GITHUB_COMMITS from '../../data/github-commits.json'; -import { - PAGES_DIR, - Page, - buildPages -} from '../index'; -import markdownRenderer from '../markdown-renderer'; - -// ingored by git -// generated in build-data/file-contrbutors.ts by build-data npm task - -export default { - title: 'Build static pages', - task: (_: any, status: any) => buildPages(getStaticPages, status) -}; - -const getStaticPages = async (): Promise => { - const paths = await getMarkdownPaths(PAGES_DIR); - return Promise.all(paths.map(path => toPage(path))); -}; - -export const getMarkdownPaths = (cwd: string): Promise => - glob('**/*.md', { - absolute: true, - cwd - }); - -export interface ToStaticPageOptions { - prod?: boolean; -} - -export const toPage = async (path: string, { prod = true }: ToStaticPageOptions = {}) => { - return { - path: path.replace(PAGES_DIR, '/docs').replace(/\.md$/i, ''), - github: prod ? await getGitHubData(path) : null, - ...renderMarkdown(await readMarkdown(path)) - }; -}; - -const renderMarkdown = (markdown: string) => { - const { body, attributes } = frontMatter(markdown) as FrontMatterResult; - - return { - ...attributes, - body: markdownRenderer(body) - }; -}; - -const readMarkdown = (path: string): Promise => - fs.readFile(path, { - encoding: 'utf8' - }); - -const getGitHubData = async (filePath: string) => { - const [, path] = /^.+\/(src\/pages\/.+\.md)$/.exec(filePath) ?? []; - - try { - const { contributors, lastUpdated } = await getFileContributors(filePath); - return { - path, - contributors, - lastUpdated - }; - } catch (error) { - console.warn(error); - return { - path, - contributors: [], - lastUpdated: new Date('2019-01-23').toISOString() - }; - } -}; - -const getFileContributors = async (filename: string) => { - return simplegit().log({ file: filename }).then(status => ({ - contributors: Array.from(new Set(status.all.map(commit => { - const commits: { [key: string]: any } = GITHUB_COMMITS; - // only add the user ID if we can find it based on the commit hash - return commits[commit.hash] ? commits[commit.hash].id : null; - // filter out null users - }).filter(user => !!user))), - // tslint:disable-next-line - lastUpdated: status.latest ? moment(status.latest.date, 'YYYY-MM-DD HH-mm-ss ZZ').toISOString() : null - }) - ); -}; diff --git a/scripts/bak/tsconfig.json b/scripts/bak/tsconfig.json deleted file mode 100644 index c6545504712..00000000000 --- a/scripts/bak/tsconfig.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "compilerOptions": { - "allowUnreachableCode": false, - "declaration": false, - "esModuleInterop": true, - "lib": [ - "es2017" - ], - "moduleResolution": "node", - "module": "commonjs", - "outDir": "build", - "pretty": true, - "resolveJsonModule": true, - "strict": true, - "target": "es2017" - }, - "include": [ - "**/*.ts" - ] -} diff --git a/scripts/bak/watch-pages/index.ts b/scripts/bak/watch-pages/index.ts deleted file mode 100644 index 0e3d8daed3b..00000000000 --- a/scripts/bak/watch-pages/index.ts +++ /dev/null @@ -1,24 +0,0 @@ -import chokidar from 'chokidar'; -import ora from 'ora'; -import { resolve } from 'path'; - -import { buildStaticPage } from '../build-pages'; - -const PAGES_GLOB = `${resolve(__dirname, '../../src/pages')}/**/*.md`; -const watcher = chokidar.watch(PAGES_GLOB, { ignoreInitial: true }); -const spinner = ora('Watching pages').start(); - -const handleChange = async (path: any) => { - try { - spinner.text = `Building ${path}`; - await buildStaticPage(path, { prod: false }); - spinner.succeed(`Built ${path}`); - spinner.start('Watching pages'); - } catch (err) { - spinner.fail(`Failed to build ${path}`); - console.error(err.message); - } -}; - -watcher.on('add', handleChange); -watcher.on('change', handleChange); diff --git a/static/icons/active-directory.png b/static/icons/active-directory.png deleted file mode 100644 index a256cb1b507..00000000000 Binary files a/static/icons/active-directory.png and /dev/null differ diff --git a/static/icons/apple-pay.png b/static/icons/apple-pay.png deleted file mode 100644 index 4f5969be4f0..00000000000 Binary files a/static/icons/apple-pay.png and /dev/null differ diff --git a/static/icons/apple-wallet-icon.png b/static/icons/apple-wallet-icon.png deleted file mode 100644 index dd20a6d9193..00000000000 Binary files a/static/icons/apple-wallet-icon.png and /dev/null differ diff --git a/static/icons/auth0.png b/static/icons/auth0.png deleted file mode 100644 index 73e424cfe80..00000000000 Binary files a/static/icons/auth0.png and /dev/null differ diff --git a/static/icons/aws-amplify.png b/static/icons/aws-amplify.png deleted file mode 100644 index 04902fffcb0..00000000000 Binary files a/static/icons/aws-amplify.png and /dev/null differ diff --git a/static/icons/couchbase.png b/static/icons/couchbase.png deleted file mode 100644 index 8669c24e384..00000000000 Binary files a/static/icons/couchbase.png and /dev/null differ diff --git a/static/icons/face-id.png b/static/icons/face-id.png deleted file mode 100644 index a8f15c9876e..00000000000 Binary files a/static/icons/face-id.png and /dev/null differ diff --git a/static/icons/facebook-icon.png b/static/icons/facebook-icon.png deleted file mode 100644 index 31d71a9c76a..00000000000 Binary files a/static/icons/facebook-icon.png and /dev/null differ diff --git a/static/icons/firebase.png b/static/icons/firebase.png deleted file mode 100644 index 250c93e20d8..00000000000 Binary files a/static/icons/firebase.png and /dev/null differ diff --git a/static/icons/instagram-icon.png b/static/icons/instagram-icon.png deleted file mode 100644 index 41dd2600280..00000000000 Binary files a/static/icons/instagram-icon.png and /dev/null differ diff --git a/static/icons/logo-auth-connect.png b/static/icons/logo-auth-connect.png deleted file mode 100644 index 40299205020..00000000000 Binary files a/static/icons/logo-auth-connect.png and /dev/null differ diff --git a/static/icons/logo-identity-vault.png b/static/icons/logo-identity-vault.png deleted file mode 100644 index 4454669a9f1..00000000000 Binary files a/static/icons/logo-identity-vault.png and /dev/null differ diff --git a/static/icons/logo-offline-storage.png b/static/icons/logo-offline-storage.png deleted file mode 100644 index 40d771d6bcb..00000000000 Binary files a/static/icons/logo-offline-storage.png and /dev/null differ diff --git a/static/icons/native-community.png b/static/icons/native-community.png deleted file mode 100644 index d36d3648582..00000000000 Binary files a/static/icons/native-community.png and /dev/null differ diff --git a/static/icons/native-enterprise.png b/static/icons/native-enterprise.png deleted file mode 100644 index 2c18cf2d283..00000000000 Binary files a/static/icons/native-enterprise.png and /dev/null differ diff --git a/static/icons/touch-id.png b/static/icons/touch-id.png deleted file mode 100644 index 66916b36389..00000000000 Binary files a/static/icons/touch-id.png and /dev/null differ diff --git a/static/img/android-device-skin.png b/static/img/android-device-skin.png deleted file mode 100644 index d31f1cc511c..00000000000 Binary files a/static/img/android-device-skin.png and /dev/null differ diff --git a/static/img/api/api-intro-header.png b/static/img/api/api-intro-header.png deleted file mode 100755 index 18707944b6f..00000000000 Binary files a/static/img/api/api-intro-header.png and /dev/null differ diff --git a/static/img/appstore.png b/static/img/appstore.png deleted file mode 100755 index 25a0bfb409e..00000000000 Binary files a/static/img/appstore.png and /dev/null differ diff --git a/static/img/guides/first-app-cap-ng/go-fast.jpg b/static/img/guides/first-app-cap-ng/go-fast.jpg deleted file mode 100644 index 6bced60b5c7..00000000000 Binary files a/static/img/guides/first-app-cap-ng/go-fast.jpg and /dev/null differ diff --git a/static/img/guides/first-app-v3/android-deploy.gif b/static/img/guides/first-app-v3/android-deploy.gif deleted file mode 100755 index 699024a6001..00000000000 Binary files a/static/img/guides/first-app-v3/android-deploy.gif and /dev/null differ diff --git a/static/img/guides/first-app-v3/app-id-location.png b/static/img/guides/first-app-v3/app-id-location.png deleted file mode 100755 index e50b67d59d1..00000000000 Binary files a/static/img/guides/first-app-v3/app-id-location.png and /dev/null differ diff --git a/static/img/guides/first-app-v3/appstore.png b/static/img/guides/first-app-v3/appstore.png deleted file mode 100755 index 9b70f4fb4c9..00000000000 Binary files a/static/img/guides/first-app-v3/appstore.png and /dev/null differ diff --git a/static/img/guides/first-app-v3/deploy-channel.png b/static/img/guides/first-app-v3/deploy-channel.png deleted file mode 100755 index 69988fc320e..00000000000 Binary files a/static/img/guides/first-app-v3/deploy-channel.png and /dev/null differ diff --git a/static/img/guides/first-app-v3/deploy-revertChange.png b/static/img/guides/first-app-v3/deploy-revertChange.png deleted file mode 100755 index 4d899df32aa..00000000000 Binary files a/static/img/guides/first-app-v3/deploy-revertChange.png and /dev/null differ diff --git a/static/img/guides/first-app-v3/email-photogallery.gif b/static/img/guides/first-app-v3/email-photogallery.gif deleted file mode 100755 index 998ae7d1ccc..00000000000 Binary files a/static/img/guides/first-app-v3/email-photogallery.gif and /dev/null differ diff --git a/static/img/guides/first-app-v3/gallery-combined.png b/static/img/guides/first-app-v3/gallery-combined.png deleted file mode 100755 index 6d2ed3a9804..00000000000 Binary files a/static/img/guides/first-app-v3/gallery-combined.png and /dev/null differ diff --git a/static/img/guides/first-app-v3/ion-lab-comparison.png b/static/img/guides/first-app-v3/ion-lab-comparison.png deleted file mode 100755 index d3d61f7a06e..00000000000 Binary files a/static/img/guides/first-app-v3/ion-lab-comparison.png and /dev/null differ diff --git a/static/img/guides/first-app-v3/ion-lab-md-styling.png b/static/img/guides/first-app-v3/ion-lab-md-styling.png deleted file mode 100755 index cb86c5282d3..00000000000 Binary files a/static/img/guides/first-app-v3/ion-lab-md-styling.png and /dev/null differ diff --git a/static/img/guides/first-app-v3/ios-install.gif b/static/img/guides/first-app-v3/ios-install.gif deleted file mode 100755 index 04e0807159b..00000000000 Binary files a/static/img/guides/first-app-v3/ios-install.gif and /dev/null differ diff --git a/static/img/guides/first-app-v3/monitoring-details.png b/static/img/guides/first-app-v3/monitoring-details.png deleted file mode 100755 index ad2090d3f98..00000000000 Binary files a/static/img/guides/first-app-v3/monitoring-details.png and /dev/null differ diff --git a/static/img/guides/first-app-v3/monitoring-event.png b/static/img/guides/first-app-v3/monitoring-event.png deleted file mode 100755 index 757dbb7bbf4..00000000000 Binary files a/static/img/guides/first-app-v3/monitoring-event.png and /dev/null differ diff --git a/static/img/guides/first-app-v3/playstore.png b/static/img/guides/first-app-v3/playstore.png deleted file mode 100755 index da1a68ce1ba..00000000000 Binary files a/static/img/guides/first-app-v3/playstore.png and /dev/null differ diff --git a/static/img/guides/first-app-v3/v3-themeColors.png b/static/img/guides/first-app-v3/v3-themeColors.png deleted file mode 100755 index 85de462582a..00000000000 Binary files a/static/img/guides/first-app-v3/v3-themeColors.png and /dev/null differ diff --git a/static/img/guides/first-app-v3/v3-theming.png b/static/img/guides/first-app-v3/v3-theming.png deleted file mode 100755 index 58d8925a148..00000000000 Binary files a/static/img/guides/first-app-v3/v3-theming.png and /dev/null differ diff --git a/static/img/guides/first-app-v4/theming-defaults.png b/static/img/guides/first-app-v4/theming-defaults.png deleted file mode 100644 index 288ec06f053..00000000000 Binary files a/static/img/guides/first-app-v4/theming-defaults.png and /dev/null differ diff --git a/static/img/guides/first-app-v4/theming-properties.png b/static/img/guides/first-app-v4/theming-properties.png deleted file mode 100644 index c5eddbbb1c5..00000000000 Binary files a/static/img/guides/first-app-v4/theming-properties.png and /dev/null differ diff --git a/static/img/guides/running/dev-app-preview.png b/static/img/guides/running/dev-app-preview.png deleted file mode 100755 index d8479eb3c24..00000000000 Binary files a/static/img/guides/running/dev-app-preview.png and /dev/null differ diff --git a/static/img/guides/scaffolding/generate-page-no-options.jpg b/static/img/guides/scaffolding/generate-page-no-options.jpg deleted file mode 100755 index 1a38414e30c..00000000000 Binary files a/static/img/guides/scaffolding/generate-page-no-options.jpg and /dev/null differ diff --git a/static/img/guides/starting/template-list.jpg b/static/img/guides/starting/template-list.jpg deleted file mode 100755 index 117c93e53bc..00000000000 Binary files a/static/img/guides/starting/template-list.jpg and /dev/null differ diff --git a/static/img/guides/starting/terminal-prompt2.png b/static/img/guides/starting/terminal-prompt2.png deleted file mode 100755 index 4f620d260be..00000000000 Binary files a/static/img/guides/starting/terminal-prompt2.png and /dev/null differ diff --git a/static/img/iphone-device-skin.png b/static/img/iphone-device-skin.png deleted file mode 100644 index c2e48843282..00000000000 Binary files a/static/img/iphone-device-skin.png and /dev/null differ diff --git a/static/img/meta/android-icon-144x144.png b/static/img/meta/android-icon-144x144.png deleted file mode 100644 index f8f3f3ee4df..00000000000 Binary files a/static/img/meta/android-icon-144x144.png and /dev/null differ diff --git a/static/img/meta/android-icon-192x192.png b/static/img/meta/android-icon-192x192.png deleted file mode 100644 index be06211c60c..00000000000 Binary files a/static/img/meta/android-icon-192x192.png and /dev/null differ diff --git a/static/img/meta/android-icon-36x36.png b/static/img/meta/android-icon-36x36.png deleted file mode 100644 index 77e10c5d2b6..00000000000 Binary files a/static/img/meta/android-icon-36x36.png and /dev/null differ diff --git a/static/img/meta/android-icon-48x48.png b/static/img/meta/android-icon-48x48.png deleted file mode 100644 index b2c23bdb2c4..00000000000 Binary files a/static/img/meta/android-icon-48x48.png and /dev/null differ diff --git a/static/img/meta/android-icon-72x72.png b/static/img/meta/android-icon-72x72.png deleted file mode 100644 index 9ec050e9532..00000000000 Binary files a/static/img/meta/android-icon-72x72.png and /dev/null differ diff --git a/static/img/meta/android-icon-96x96.png b/static/img/meta/android-icon-96x96.png deleted file mode 100644 index 3f9f8c5e2dd..00000000000 Binary files a/static/img/meta/android-icon-96x96.png and /dev/null differ diff --git a/static/img/meta/apple-touch-icon-114x114.png b/static/img/meta/apple-touch-icon-114x114.png deleted file mode 100644 index c238ba27d5d..00000000000 Binary files a/static/img/meta/apple-touch-icon-114x114.png and /dev/null differ diff --git a/static/img/meta/apple-touch-icon-120x120.png b/static/img/meta/apple-touch-icon-120x120.png deleted file mode 100644 index 33cdf560cf3..00000000000 Binary files a/static/img/meta/apple-touch-icon-120x120.png and /dev/null differ diff --git a/static/img/meta/apple-touch-icon-144x144.png b/static/img/meta/apple-touch-icon-144x144.png deleted file mode 100644 index f55188e7aa3..00000000000 Binary files a/static/img/meta/apple-touch-icon-144x144.png and /dev/null differ diff --git a/static/img/meta/apple-touch-icon-152x152.png b/static/img/meta/apple-touch-icon-152x152.png deleted file mode 100644 index 3704e5ea53c..00000000000 Binary files a/static/img/meta/apple-touch-icon-152x152.png and /dev/null differ diff --git a/static/img/meta/apple-touch-icon-180x180.png b/static/img/meta/apple-touch-icon-180x180.png deleted file mode 100644 index 8b4ea36759a..00000000000 Binary files a/static/img/meta/apple-touch-icon-180x180.png and /dev/null differ diff --git a/static/img/meta/apple-touch-icon-57x57.png b/static/img/meta/apple-touch-icon-57x57.png deleted file mode 100644 index ec2a3be2dcb..00000000000 Binary files a/static/img/meta/apple-touch-icon-57x57.png and /dev/null differ diff --git a/static/img/meta/apple-touch-icon-60x60.png b/static/img/meta/apple-touch-icon-60x60.png deleted file mode 100644 index 67417497412..00000000000 Binary files a/static/img/meta/apple-touch-icon-60x60.png and /dev/null differ diff --git a/static/img/meta/apple-touch-icon-72x72.png b/static/img/meta/apple-touch-icon-72x72.png deleted file mode 100644 index 55457efbd96..00000000000 Binary files a/static/img/meta/apple-touch-icon-72x72.png and /dev/null differ diff --git a/static/img/meta/apple-touch-icon-76x76.png b/static/img/meta/apple-touch-icon-76x76.png deleted file mode 100644 index 6b520bd8bc7..00000000000 Binary files a/static/img/meta/apple-touch-icon-76x76.png and /dev/null differ diff --git a/static/img/meta/apple-touch-icon-precomposed.png b/static/img/meta/apple-touch-icon-precomposed.png deleted file mode 100644 index 973557359ab..00000000000 Binary files a/static/img/meta/apple-touch-icon-precomposed.png and /dev/null differ diff --git a/static/img/meta/apple-touch-icon.png b/static/img/meta/apple-touch-icon.png deleted file mode 100644 index 973557359ab..00000000000 Binary files a/static/img/meta/apple-touch-icon.png and /dev/null differ diff --git a/static/img/meta/favicon-16x16.png b/static/img/meta/favicon-16x16.png deleted file mode 100644 index c883fde4742..00000000000 Binary files a/static/img/meta/favicon-16x16.png and /dev/null differ diff --git a/static/img/meta/favicon-32x32.png b/static/img/meta/favicon-32x32.png deleted file mode 100644 index 2a5cbd69bf9..00000000000 Binary files a/static/img/meta/favicon-32x32.png and /dev/null differ diff --git a/static/img/meta/ms-icon-144x144.png b/static/img/meta/ms-icon-144x144.png deleted file mode 100644 index f55188e7aa3..00000000000 Binary files a/static/img/meta/ms-icon-144x144.png and /dev/null differ diff --git a/static/img/meta/ms-icon-150x150.png b/static/img/meta/ms-icon-150x150.png deleted file mode 100644 index 6c7fec304e2..00000000000 Binary files a/static/img/meta/ms-icon-150x150.png and /dev/null differ diff --git a/static/img/meta/ms-icon-310x310.png b/static/img/meta/ms-icon-310x310.png deleted file mode 100644 index afdf3ff9dd1..00000000000 Binary files a/static/img/meta/ms-icon-310x310.png and /dev/null differ diff --git a/static/img/meta/ms-icon-70x70.png b/static/img/meta/ms-icon-70x70.png deleted file mode 100644 index 9bb74aaca72..00000000000 Binary files a/static/img/meta/ms-icon-70x70.png and /dev/null differ diff --git a/static/img/native-platforms/platform-android-google.svg b/static/img/native-platforms/platform-android-google.svg deleted file mode 100644 index d2ac0f478df..00000000000 --- a/static/img/native-platforms/platform-android-google.svg +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/static/img/native-platforms/platform-apple-ios.svg b/static/img/native-platforms/platform-apple-ios.svg deleted file mode 100644 index bad5ee0e0e5..00000000000 --- a/static/img/native-platforms/platform-apple-ios.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - diff --git a/static/img/native-platforms/platform-electronjs-desktop.svg b/static/img/native-platforms/platform-electronjs-desktop.svg deleted file mode 100644 index f4383c16b53..00000000000 --- a/static/img/native-platforms/platform-electronjs-desktop.svg +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - - - - - - - diff --git a/static/img/native-platforms/platform-pwa-progressive-web-app.svg b/static/img/native-platforms/platform-pwa-progressive-web-app.svg deleted file mode 100644 index 3dc2224495a..00000000000 --- a/static/img/native-platforms/platform-pwa-progressive-web-app.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - diff --git a/static/img/playstore.png b/static/img/playstore.png deleted file mode 100755 index 6218d868fb0..00000000000 Binary files a/static/img/playstore.png and /dev/null differ diff --git a/static/img/studio/2/ss-assets.png b/static/img/studio/2/ss-assets.png deleted file mode 100644 index 642f5c26175..00000000000 Binary files a/static/img/studio/2/ss-assets.png and /dev/null differ diff --git a/static/img/studio/2/ss-component-index.png b/static/img/studio/2/ss-component-index.png deleted file mode 100644 index 1bf564a5b16..00000000000 Binary files a/static/img/studio/2/ss-component-index.png and /dev/null differ diff --git a/static/img/studio/2/ss-component-new.png b/static/img/studio/2/ss-component-new.png deleted file mode 100644 index 5ac6a5402ca..00000000000 Binary files a/static/img/studio/2/ss-component-new.png and /dev/null differ diff --git a/static/img/studio/2/ss-compose-reload.png b/static/img/studio/2/ss-compose-reload.png deleted file mode 100644 index 08c580e2f60..00000000000 Binary files a/static/img/studio/2/ss-compose-reload.png and /dev/null differ diff --git a/static/img/studio/2/ss-designer-index.png b/static/img/studio/2/ss-designer-index.png deleted file mode 100644 index 70aee9ec981..00000000000 Binary files a/static/img/studio/2/ss-designer-index.png and /dev/null differ diff --git a/static/img/studio/2/ss-designer.png b/static/img/studio/2/ss-designer.png deleted file mode 100644 index af1b869c6f2..00000000000 Binary files a/static/img/studio/2/ss-designer.png and /dev/null differ diff --git a/static/img/studio/2/ss-editor-code.png b/static/img/studio/2/ss-editor-code.png deleted file mode 100644 index bb8f98dde15..00000000000 Binary files a/static/img/studio/2/ss-editor-code.png and /dev/null differ diff --git a/static/img/studio/2/ss-editor-styles.png b/static/img/studio/2/ss-editor-styles.png deleted file mode 100644 index 3a0d2742050..00000000000 Binary files a/static/img/studio/2/ss-editor-styles.png and /dev/null differ diff --git a/static/img/studio/2/ss-editor-template.png b/static/img/studio/2/ss-editor-template.png deleted file mode 100644 index bc02a11371b..00000000000 Binary files a/static/img/studio/2/ss-editor-template.png and /dev/null differ diff --git a/static/img/studio/2/ss-editor-view.png b/static/img/studio/2/ss-editor-view.png deleted file mode 100644 index b49291b068d..00000000000 Binary files a/static/img/studio/2/ss-editor-view.png and /dev/null differ diff --git a/static/img/studio/2/ss-new-elements.png b/static/img/studio/2/ss-new-elements.png deleted file mode 100644 index 30e1e070f08..00000000000 Binary files a/static/img/studio/2/ss-new-elements.png and /dev/null differ diff --git a/static/img/studio/2/ss-new-feature.png b/static/img/studio/2/ss-new-feature.png deleted file mode 100644 index f88b9e7c7a2..00000000000 Binary files a/static/img/studio/2/ss-new-feature.png and /dev/null differ diff --git a/static/img/studio/2/ss-new-project.png b/static/img/studio/2/ss-new-project.png deleted file mode 100644 index c53bd6a5f63..00000000000 Binary files a/static/img/studio/2/ss-new-project.png and /dev/null differ diff --git a/static/img/studio/2/ss-properties-panel.png b/static/img/studio/2/ss-properties-panel.png deleted file mode 100644 index 66ffecb94b3..00000000000 Binary files a/static/img/studio/2/ss-properties-panel.png and /dev/null differ diff --git a/static/img/studio/2/ss-quick-add-element-menu.png b/static/img/studio/2/ss-quick-add-element-menu.png deleted file mode 100644 index 78d61455d3c..00000000000 Binary files a/static/img/studio/2/ss-quick-add-element-menu.png and /dev/null differ diff --git a/static/img/studio/2/ss-select-element-menu.png b/static/img/studio/2/ss-select-element-menu.png deleted file mode 100644 index 9f4752f4e14..00000000000 Binary files a/static/img/studio/2/ss-select-element-menu.png and /dev/null differ diff --git a/static/img/studio/2/ss-settings-appflow.png b/static/img/studio/2/ss-settings-appflow.png deleted file mode 100644 index a0bfa8c3184..00000000000 Binary files a/static/img/studio/2/ss-settings-appflow.png and /dev/null differ diff --git a/static/img/studio/2/ss-settings-platforms.png b/static/img/studio/2/ss-settings-platforms.png deleted file mode 100644 index f52856b1982..00000000000 Binary files a/static/img/studio/2/ss-settings-platforms.png and /dev/null differ diff --git a/static/img/studio/2/ss-settings-plugins.png b/static/img/studio/2/ss-settings-plugins.png deleted file mode 100644 index fc5fb8f9187..00000000000 Binary files a/static/img/studio/2/ss-settings-plugins.png and /dev/null differ diff --git a/static/img/studio/2/ss-settings-resources.png b/static/img/studio/2/ss-settings-resources.png deleted file mode 100644 index 3b43c4ee029..00000000000 Binary files a/static/img/studio/2/ss-settings-resources.png and /dev/null differ diff --git a/static/img/studio/2/ss-settings.png b/static/img/studio/2/ss-settings.png deleted file mode 100644 index 82fbb1f179e..00000000000 Binary files a/static/img/studio/2/ss-settings.png and /dev/null differ diff --git a/static/img/studio/2/ss-terminal-git.png b/static/img/studio/2/ss-terminal-git.png deleted file mode 100644 index e3c92520073..00000000000 Binary files a/static/img/studio/2/ss-terminal-git.png and /dev/null differ diff --git a/static/img/studio/2/ss-terminal-open.png b/static/img/studio/2/ss-terminal-open.png deleted file mode 100644 index f19116608c0..00000000000 Binary files a/static/img/studio/2/ss-terminal-open.png and /dev/null differ diff --git a/static/img/studio/2/ss-terminal.png b/static/img/studio/2/ss-terminal.png deleted file mode 100644 index e16e1ca0dcb..00000000000 Binary files a/static/img/studio/2/ss-terminal.png and /dev/null differ diff --git a/static/img/studio/2/ss-theme.png b/static/img/studio/2/ss-theme.png deleted file mode 100644 index f0dd2213540..00000000000 Binary files a/static/img/studio/2/ss-theme.png and /dev/null differ diff --git a/static/img/studio/2/ss-tree-select.png b/static/img/studio/2/ss-tree-select.png deleted file mode 100644 index c6a0c9bc188..00000000000 Binary files a/static/img/studio/2/ss-tree-select.png and /dev/null differ diff --git a/static/img/studio/ss-add-element-menu.png b/static/img/studio/ss-add-element-menu.png deleted file mode 100644 index c38a56e4572..00000000000 Binary files a/static/img/studio/ss-add-element-menu.png and /dev/null differ diff --git a/static/img/studio/ss-assets-window.png b/static/img/studio/ss-assets-window.png deleted file mode 100644 index 037629bf5e0..00000000000 Binary files a/static/img/studio/ss-assets-window.png and /dev/null differ diff --git a/static/img/studio/ss-assets.png b/static/img/studio/ss-assets.png deleted file mode 100644 index 382562e35ca..00000000000 Binary files a/static/img/studio/ss-assets.png and /dev/null differ diff --git a/static/img/studio/ss-canvas-reload.png b/static/img/studio/ss-canvas-reload.png deleted file mode 100644 index 6d5ec9c35c1..00000000000 Binary files a/static/img/studio/ss-canvas-reload.png and /dev/null differ diff --git a/static/img/studio/ss-code.png b/static/img/studio/ss-code.png deleted file mode 100644 index 2a77027daae..00000000000 Binary files a/static/img/studio/ss-code.png and /dev/null differ diff --git a/static/img/studio/ss-color-generator.png b/static/img/studio/ss-color-generator.png deleted file mode 100644 index 513129c2e5c..00000000000 Binary files a/static/img/studio/ss-color-generator.png and /dev/null differ diff --git a/static/img/studio/ss-component-index.png b/static/img/studio/ss-component-index.png deleted file mode 100644 index 0fc7384de4d..00000000000 Binary files a/static/img/studio/ss-component-index.png and /dev/null differ diff --git a/static/img/studio/ss-compose-scripts.png b/static/img/studio/ss-compose-scripts.png deleted file mode 100644 index ab6ff43d50d..00000000000 Binary files a/static/img/studio/ss-compose-scripts.png and /dev/null differ diff --git a/static/img/studio/ss-compose-styles.png b/static/img/studio/ss-compose-styles.png deleted file mode 100644 index b5ed30707ef..00000000000 Binary files a/static/img/studio/ss-compose-styles.png and /dev/null differ diff --git a/static/img/studio/ss-compose-template.png b/static/img/studio/ss-compose-template.png deleted file mode 100644 index 4a3f7fec2ab..00000000000 Binary files a/static/img/studio/ss-compose-template.png and /dev/null differ diff --git a/static/img/studio/ss-compose.png b/static/img/studio/ss-compose.png deleted file mode 100644 index 4a3f7fec2ab..00000000000 Binary files a/static/img/studio/ss-compose.png and /dev/null differ diff --git a/static/img/studio/ss-devtools.png b/static/img/studio/ss-devtools.png deleted file mode 100644 index 317dd9d998b..00000000000 Binary files a/static/img/studio/ss-devtools.png and /dev/null differ diff --git a/static/img/studio/ss-element-tree.png b/static/img/studio/ss-element-tree.png deleted file mode 100644 index 726d54756de..00000000000 Binary files a/static/img/studio/ss-element-tree.png and /dev/null differ diff --git a/static/img/studio/ss-install-plugin-modal.png b/static/img/studio/ss-install-plugin-modal.png deleted file mode 100644 index 887a72d5fee..00000000000 Binary files a/static/img/studio/ss-install-plugin-modal.png and /dev/null differ diff --git a/static/img/studio/ss-my-custom-thing-ngmodule.png b/static/img/studio/ss-my-custom-thing-ngmodule.png deleted file mode 100644 index cb59010dedd..00000000000 Binary files a/static/img/studio/ss-my-custom-thing-ngmodule.png and /dev/null differ diff --git a/static/img/studio/ss-new-component-modal.png b/static/img/studio/ss-new-component-modal.png deleted file mode 100644 index 3b64b88f2f2..00000000000 Binary files a/static/img/studio/ss-new-component-modal.png and /dev/null differ diff --git a/static/img/studio/ss-new-feature-button.png b/static/img/studio/ss-new-feature-button.png deleted file mode 100644 index 8d81ea6d26c..00000000000 Binary files a/static/img/studio/ss-new-feature-button.png and /dev/null differ diff --git a/static/img/studio/ss-new-project.png b/static/img/studio/ss-new-project.png deleted file mode 100644 index 877894e13a0..00000000000 Binary files a/static/img/studio/ss-new-project.png and /dev/null differ diff --git a/static/img/studio/ss-new-terminal.png b/static/img/studio/ss-new-terminal.png deleted file mode 100644 index 3c36343b0f6..00000000000 Binary files a/static/img/studio/ss-new-terminal.png and /dev/null differ diff --git a/static/img/studio/ss-page-index.png b/static/img/studio/ss-page-index.png deleted file mode 100644 index c638267bc7c..00000000000 Binary files a/static/img/studio/ss-page-index.png and /dev/null differ diff --git a/static/img/studio/ss-page-routing-module.png b/static/img/studio/ss-page-routing-module.png deleted file mode 100644 index 1628122d6e8..00000000000 Binary files a/static/img/studio/ss-page-routing-module.png and /dev/null differ diff --git a/static/img/studio/ss-properties-panel.png b/static/img/studio/ss-properties-panel.png deleted file mode 100644 index 6c1dc0be4fd..00000000000 Binary files a/static/img/studio/ss-properties-panel.png and /dev/null differ diff --git a/static/img/studio/ss-quick-add-element-menu.png b/static/img/studio/ss-quick-add-element-menu.png deleted file mode 100644 index 78d61455d3c..00000000000 Binary files a/static/img/studio/ss-quick-add-element-menu.png and /dev/null differ diff --git a/static/img/studio/ss-run-menu.png b/static/img/studio/ss-run-menu.png deleted file mode 100644 index cbc0939c65b..00000000000 Binary files a/static/img/studio/ss-run-menu.png and /dev/null differ diff --git a/static/img/studio/ss-run-modal.png b/static/img/studio/ss-run-modal.png deleted file mode 100644 index a54be1a88a6..00000000000 Binary files a/static/img/studio/ss-run-modal.png and /dev/null differ diff --git a/static/img/studio/ss-search-and-replace.png b/static/img/studio/ss-search-and-replace.png deleted file mode 100644 index 0610e1c1998..00000000000 Binary files a/static/img/studio/ss-search-and-replace.png and /dev/null differ diff --git a/static/img/studio/ss-search-bar.png b/static/img/studio/ss-search-bar.png deleted file mode 100644 index 2d6e29a81cf..00000000000 Binary files a/static/img/studio/ss-search-bar.png and /dev/null differ diff --git a/static/img/studio/ss-select-element-menu.png b/static/img/studio/ss-select-element-menu.png deleted file mode 100644 index 9f4752f4e14..00000000000 Binary files a/static/img/studio/ss-select-element-menu.png and /dev/null differ diff --git a/static/img/studio/ss-serve-window.png b/static/img/studio/ss-serve-window.png deleted file mode 100644 index fe1179f46a3..00000000000 Binary files a/static/img/studio/ss-serve-window.png and /dev/null differ diff --git a/static/img/studio/ss-settings-app-resources.png b/static/img/studio/ss-settings-app-resources.png deleted file mode 100644 index 8a330279233..00000000000 Binary files a/static/img/studio/ss-settings-app-resources.png and /dev/null differ diff --git a/static/img/studio/ss-settings-config.png b/static/img/studio/ss-settings-config.png deleted file mode 100644 index f7e65c251ed..00000000000 Binary files a/static/img/studio/ss-settings-config.png and /dev/null differ diff --git a/static/img/studio/ss-settings-platforms.png b/static/img/studio/ss-settings-platforms.png deleted file mode 100644 index 1fe941ad001..00000000000 Binary files a/static/img/studio/ss-settings-platforms.png and /dev/null differ diff --git a/static/img/studio/ss-settings-plugins.png b/static/img/studio/ss-settings-plugins.png deleted file mode 100644 index ab29b436346..00000000000 Binary files a/static/img/studio/ss-settings-plugins.png and /dev/null differ diff --git a/static/img/studio/ss-support-modal.png b/static/img/studio/ss-support-modal.png deleted file mode 100644 index 2ff53da7862..00000000000 Binary files a/static/img/studio/ss-support-modal.png and /dev/null differ diff --git a/static/img/studio/ss-terminal-with-git.png b/static/img/studio/ss-terminal-with-git.png deleted file mode 100644 index 44217851b11..00000000000 Binary files a/static/img/studio/ss-terminal-with-git.png and /dev/null differ diff --git a/static/img/studio/ss-variables-file.png b/static/img/studio/ss-variables-file.png deleted file mode 100644 index 58b2f83cfb5..00000000000 Binary files a/static/img/studio/ss-variables-file.png and /dev/null differ diff --git a/vercel.json b/vercel.json index a6cebcf3432..44c1cf1f2e0 100644 --- a/vercel.json +++ b/vercel.json @@ -47,7 +47,7 @@ }, { "source": "/docs/ja/v9/:match*", "destination": "/docs/ja/:match*" }, { - "source": "/docs/(v[0-9]+|next)?/developer-resources/:path*", + "source": "/docs/(ja)?/(v[0-9]+|next)?/developer-resources/:path*", "destination": "https://ionic.io/resources" }, { "source": "/docs/next/:match*", "destination": "/docs/:match*" }, diff --git a/versioned_docs/version-v5/angular/your-first-app.mdx b/versioned_docs/version-v5/angular/your-first-app.mdx index e86420b90dc..fc15bb95dbc 100644 --- a/versioned_docs/version-v5/angular/your-first-app.mdx +++ b/versioned_docs/version-v5/angular/your-first-app.mdx @@ -17,10 +17,6 @@ Here’s the finished app running on all 3 platforms: allowFullScreen > -:::note -Looking for the previous version of this guide that covered Ionic 4 and Cordova? [See here.](../developer-resources/guides/first-app-v4/intro.mdx) -::: - ## What We'll Build We'll create a Photo Gallery app that offers the ability to take photos with your device's camera, display them in a grid, and store them permanently on the device. diff --git a/versioned_docs/version-v5/developer-resources/books.mdx b/versioned_docs/version-v5/developer-resources/books.mdx deleted file mode 100644 index e3eae671a5a..00000000000 --- a/versioned_docs/version-v5/developer-resources/books.mdx +++ /dev/null @@ -1,75 +0,0 @@ -# Books - -### [Learn Ionic 4 From Scratch](https://leanpub.com/learnionic4fromscratch) - -Angular. Vue. React. Vanilla JavaScript. All of these tools can be used to create awesome applications with Ionic, thanks to the new Stencil compiler. This book is aimed at beginners that are looking to create amazing web, mobile and desktop applications using Ionic with examples across all of the popular frameworks. - -{/* cspell:disable-next-line */} - -by [Paul Halliday](https://developer.school) - -### [Creating Ionic Applications with StencilJS](https://www.joshmorony.com/creating-ionic-applications-with-stencil-js/) - [Free Preview](https://cdn2.hubspot.net/hubfs/3776657/PREVIEW-Creating-Ionic-Apps-with-StencilJS.pdf) - -As well as being a powerful tool for generating reuseable web components, StencilJS provides the tools needed to build an entire application out of web components. Combined with the Ionic web components, StencilJS gives us everything we need to build high-quality production mobile applications - no framework required. - -{/* cspell:disable-next-line */} - -by [Joshua Morony](https://www.joshmorony.com/blog) - -### [Mobile App Development with Ionic: Cross-Platform Apps with Ionic 2, Angular 2, and Cordova](https://www.amazon.com/Mobile-App-Development-Ionic-Cross-Platform/dp/1491937785/ref=sr_1_2?ie=UTF8&qid=1464183332&sr=8-2&keywords=ionic+2) - -{/* cspell:disable-next-line */} - -by Chris Griffith - -### [Building Mobile Apps with Ionic & Angular](https://www.joshmorony.com/building-mobile-apps-with-ionic-2/) - -{/* cspell:disable-next-line */} - -by [Joshua Morony](https://www.joshmorony.com/blog) - -Building Mobile Apps with Ionic & Angular is an all-in-one resource for learning the latest and greatest version of Ionic. It is targeted at beginners and works its way through the basics of Ionic, to example applications of varying complexity, and then to the steps required to build and publish your application (on the app stores or as a PWA). It has been updated for every major release, so you can rest easy knowing that you're not learning outdated tech. - -### [Ionic 2 From Zero to App Store](https://devdactic.com/zero-to-app) - -{/* cspell:disable-next-line */} - -by Simon Reimler - -### [Ionic Framework By Example](https://www.packtpub.com/application-development/ionic-framework-example) - -{/* cspell:disable-next-line */} - -by Sani Yusuf - -### [Building Firestore Powered Ionic Apps](https://javebratt.com/ionic-firebase-book/) - -{/* cspell:disable-next-line */} - -by Jorge Vergara - -This book will help you go from not knowing what Firebase is to be able to use the different APIs for your Ionic Applications. It will take you from “_What’s Firebase?_” to building scalable, production-ready apps and it’s always up-to-date with latest Ionic and Firebase versions. - -### [Ionic 2 Cookbook - Second Edition](https://www.amazon.com/Ionic-Cookbook-Second-Hoc-Phan-ebook/dp/B01C4D9VWS?ie=UTF8&keywords=ionic%202&qid=1464183332&ref_=sr_1_3&sr=8-3) - -{/* cspell:disable-next-line */} - -by Hoc Phan - -### [Mastering Ionic 2](https://www.leanpub.com/masteringionic2) - -{/* cspell:disable-next-line */} - -by James Griffiths - -### [Learning Ionic](https://www.packtpub.com/in/application-development/learning-ionic) (Ionic 1) - -{/* cspell:disable-next-line */} - -by Arvind Ravulavaru - -### [Learning Ionic - Second Edition](https://www.packtpub.com/in/web-development/learning-ionic-second-edition) (Ionic 2/3) - -{/* cspell:disable-next-line */} - -by Arvind Ravulavaru diff --git a/versioned_docs/version-v5/developer-resources/courses.mdx b/versioned_docs/version-v5/developer-resources/courses.mdx deleted file mode 100644 index 568f0fc05a4..00000000000 --- a/versioned_docs/version-v5/developer-resources/courses.mdx +++ /dev/null @@ -1,107 +0,0 @@ -# Courses - -### [Elite Ionic](https://www.joshmorony.com/elite/) - -{/* cspell:disable-next-line */} - -by Josh Morony - -Elite Ionic is an online course for Ionic developers who want to move past the basics, and build complex, well tested, high performing, beautiful, and useable mobile applications. It is recommended that you already have a reasonably solid understanding of the basics of Ionic before starting this course. - -### [Ionic Academy](https://ionicacademy.com/) - -{/* cspell:disable-next-line */} - -by Simon Grimm - -Learn Ionic with step-by-step video courses & quick wins from one of the Ionic community leaders. Covers beginner, intermediate and advanced topics. Get access to a community of developers just like you. - -### [Ionic Framework: Tips, Tricks & Techniques](https://www.packtpub.com/mobile/ionic-framework-tips-tricks-and-techniques-video) - -{/* cspell:disable-next-line */} - -by Charles Muzonzini - -In this course, you will master tips and best practices for Ionic 4 & Ionic 5 that you can immediately implement to build high quality apps. This course covers a wide variety of topics from increasing app performance, to building custom native plugins, to securing your apps. It's a practical, hands-on course that will take your app building skills to the next level. - -### [Building Desktop Apps with Ionic and Electron](https://pluralsight.pxf.io/VeMXO) - -{/* cspell:disable-next-line */} - -by Michael Callaghan at Pluralsight - -Desktop development has historically required dramatically different skills than those required for web -development. The two disciplines don't mesh well. In this course, Building Desktop Apps with Ionic and Electron, -you will gain the ability to apply your hard-earned web development skills to build amazing desktop -applications. First, you will learn how to build a functional and attractive UI with Ionic and Angular. Next, -you will discover how to wrap that UI into an Electron application shell. Finally, you will explore how to -package your app and make it ready for distribution. When you are finished with this course, you will have the -skills and knowledge of Ionic and Electron development needed to deploy and distribute a beautiful app to both -Windows and macOS users. - -### [Building Progressive Web Apps with Ionic](https://pluralsight.pxf.io/Ly2EY) - -{/* cspell:disable-next-line */} - -by Michael Callaghan at Pluralsight - -Everything changed when Google created the concept of Progressive Web Applications or PWA. A PWA is a pure web -application that you can install on devices, that can function with limited network functionality, through its -use of intelligent caching. Build a Progressive Web App that will run anywhere. In this course, Building -Progressive Web Apps with Ionic, you will learn foundational knowledge and gain the ability to create a web -application that will run anywhere: the browser, desktop, or mobile clients. First, you will learn what a -Progressive Web App (or PWA) is. Next, you will discover how to use the Ionic Framework, Angular, and Firebase -to create, deploy, and optimize a basic web application into a full-blown PWA. Finally, you will explore how to -configure the application to make it installable and runnable on Androids and iPhones. When you’re finished with -this course, you will have the skills and knowledge of Ionic and PWAs needed to create and deploy your own -Progressive Web Application anywhere you desire. - -### [Ionic CLI](https://pluralsight.pxf.io/ionic-cli) - -{/* cspell:disable-next-line */} - -by Michael Callaghan at Pluralsight - -Since its inception, the Ionic Framework has included a rudimentary command line interface. Though only a few -years old, it has matured into a powerful tool that should be part of every developer’s toolbox. This course, -Ionic CLI, will start at the top and explore the Ionic CLI. First, you'll see how to create projects and -components. Next, you will learn how to build and serve apps. Finally, you'll discover how to share projects -with others, and even integrate with other build tools. Whether you’re just starting to explore Ionic, or have -been using it since its pre-beta days, there is something here for you. By the end of the course, you’ll have -the confidence to use the Ionic CLI as part of your everyday Ionic development. - -### [Wordpress Rest API and Ionic 4 (Angular) App With Auth](https://www.udemy.com/course/wordpress-rest-api-and-ionic-3-crud/) - -{/* cspell:disable-next-line */} - -by Baljeet Singh at Udemy - -### [Building Mobile Apps with Ionic 2, Angular 2, and TypeScript](https://app.pluralsight.com/library/courses/ionic2-angular2-typescript-mobile-apps/table-of-contents) - -{/* cspell:disable-next-line */} - -by Pluralsight - -### [Introducing Ionic 2](http://shop.oreilly.com/product/0636920050353.do) - -{/* cspell:disable-next-line */} - -by Mathieu Chauvinc - -### [Ionic 2 Master Course](https://www.udemy.com/ionic-2-tutorial/) - -{/* cspell:disable-next-line */} - -by Udemy - -### [Introducing Ionic 2](https://www.udemy.com/introducing-ionic-2/) - -{/* cspell:disable-next-line */} - -by Udemy - -### [Ionic 2 Solutions](https://www.packtpub.com/web-development/ionic-2-solutions-video) - -{/* cspell:disable-next-line */} - -by Hoc Phan diff --git a/versioned_docs/version-v5/developer-resources/guides.mdx b/versioned_docs/version-v5/developer-resources/guides.mdx deleted file mode 100644 index c0590b83684..00000000000 --- a/versioned_docs/version-v5/developer-resources/guides.mdx +++ /dev/null @@ -1,9 +0,0 @@ -# Guides - -### [Your First Ionic App - v3](guides/first-app-v3/intro.mdx) - -Follow along as we create a working Photo Gallery app using Ionic Framework v3 and Appflow. - -### [Your First Ionic 4 App - Angular and Cordova](guides/first-app-v4/intro.mdx) - -Follow along as we create a working Photo Gallery app using Ionic Framework v4 and Cordova. diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx b/versioned_docs/version-v5/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx deleted file mode 100644 index 7887f03a320..00000000000 --- a/versioned_docs/version-v5/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx +++ /dev/null @@ -1,195 +0,0 @@ -# Creating a Photo Gallery with Device Storage - -Last time, we successfully added the Camera plugin to the About page of our Tabs app. Currently, the photo is replaced each time a new one is taken. What if we wanted to display multiple photos together? Let’s create a photo gallery. You can follow along with the complete code for this in [the part 2 folder](https://github.com/ionic-team/photo-gallery-tutorial-ionic3/tree/master/part2) on GitHub. - -## Creating a Dedicated Photo Service - -From a terminal window, navigate to your Ionic project and run: - -```shell -ionic g provider PhotoProvider -``` - -This creates a PhotoProvider class in a dedicated providers/photo folder: - -```Javascript -import { HttpClient } from '@angular/common/http'; -import { Injectable } from '@angular/core'; - -/* - Generated class for the PhotoProvider provider. - - See https://angular.io/guide/dependency-injection for more info on providers - and Angular DI. -*/ -@Injectable() -export class PhotoProvider { - - constructor(public http: HttpClient) { - console.log('Hello PhotoProvider Provider'); - } -} -``` - -Within this class, add a Photo class. The “data” property represents the base64 image data of a captured photo: - -```Javascript -class Photo { - data: any; -} -``` - -Then, create a Photos array to represent our photo gallery: - -```Javascript -export class PhotoProvider { - - public photos: Photo[] = []; - - constructor() { } -} -``` - -Back in `about.ts`, import PhotoProvider: - -```Javascript -import { PhotoProvider } from '../../providers/photo/photo'; -``` - -Add it to the Constructor: - -```Javascript -constructor(private camera: Camera, public photoService: PhotoProvider) { } -``` - -Next, move all code pertaining to the Camera plugin to the PhotoService class. This includes the takePicture method, the Camera import, and the About page constructor. Also, remove references to HttpClient - we won’t be making any HTTP calls. - -Continuing on, we need to convert currentImage variable references to the new photos array. Start by adding the captured photo data into the photos array: - -```Javascript -this.camera.getPicture(options).then((imageData) => { - // Add new photo to gallery - this.photos.unshift({ - data: 'data:image/jpeg;base64,' + imageData - }); }, (err) => { - // Handle error - console.log("Camera issue: " + err); -}); -``` - -In `about.page.ts`, remove the currentImage variable and the reference to Camera in the constructor, leaving only PhotoService: - -```Javascript -export class AboutPage { - constructor(public navCtrl: NavController, public photoService: PhotoProvider) { } -} -``` - -Next, in `about.page.html`, remove the currentImage img tag. In its place, use an ion-grid component, which provides a great way to arrange elements on a page. In this case, we’ll use it to display 2 photos per row. - -```html - - - - - - - -``` - -Here, we loop through each photo in the PhotoServices photos array, adding a new column for each. Since an ion-row consists of 12 “blocks” of space, and we’re setting the size to 6 (“col-6”), only 2 photos are displayed per row. - -Last, update the Fab button to call the PhotoProvider’s `takePicture` method: - -```Html - - - -``` - -Save the file and watch - a camera button appears! Tap on it and notice that it doesn’t do anything. Let’s fix that next. - -## Add the Camera Dependencies via the CLI - -In order to use the Camera, we need to bring in its JavaScript and native library dependencies. Back over in your Terminal window, run the following command, which adds the JavaScript library to the project, thus exposing the Camera API in TypeScript code: - -```shell -npm install --save @awesome-cordova-plugins/camera -``` - -In `package.json`, you’ll notice a new JavaScript dependency has been added: - -`"@awesome-cordova-plugins/camera": "^4.12.0"` - -Next, run this command to add the native iOS and Android code, effectively allowing the Camera to work on a mobile device: - -```shell -ionic cordova plugin add cordova-plugin-camera -``` - -In `config.xml`, a new plugin entry is created: - -```xml - -``` - -The next step is only required for iOS users. As of iOS 10, developers must provide a reason for why the app wishes to access the device camera. Add this to the bottom of `config.xml`: - -```xml - - - Used to take pictures - -``` - -## Add Camera plugin to Angular App Module - -There’s one more step we need to do since this is an Angular project: register the Camera in the App Module (`src/app/app.module.ts`). First, import the Camera module: - -```Javascript -import { Camera } from '@awesome-cordova-plugins/camera'; -``` - -Then, add it as a Provider: - -```Javascript -providers: [ - StatusBar, - SplashScreen, - Camera, - {provide: ErrorHandler, useClass: IonicErrorHandler} - ], -``` - -It can now be used on any of our App pages. - -## Add the Camera to the About page - -Our camera button doesn’t do anything yet. Over in `about.html`, add a click handler to the button: - -```html - -``` - -Then, update the image placeholder. The following binds the “currentImage” variable (which we’ll work on next) to the image to display to the user. - -```html - -``` - -Open `about.ts` next and import the Camera library: - -```Javascript -import { Camera, CameraOptions } from '@awesome-cordova-plugins/camera'; -``` - -Next, define the “currentImage” variable and inject the Camera into this class via the constructor: - -```Javascript -export class AboutPage { - currentImage: any; - - constructor(public navCtrl: NavController, private camera: Camera) { -} -``` - -Finally, add the “takePicture” method, already wired up to execute once the camera button has been tapped: - -```Javascript -takePicture() { - const options: CameraOptions = { - quality: 100, - destinationType: this.camera.DestinationType.DATA_URL, - encodingType: this.camera.EncodingType.JPEG, - mediaType: this.camera.MediaType.PICTURE - } - - this.camera.getPicture(options).then((imageData) => { - this.currentImage = 'data:image/jpeg;base64,' + imageData; - }, (err) => { - // Handle error - console.log("Camera issue:" + err); - }); - } -``` - -Take notice: there’s no mention of iOS or Android! This is the awesome power of plugins: you use one API (`camera.getPicture()` in this case) and the plugin takes care of the platform differences for you. Write once, run everywhere `:)` - -Save this file then tap the Camera button in DevApp. Voila! The camera should open on your device. Once a photo has been taken, it displays on the Photo Gallery page. - -Finally, back up your changes to Appflow: - -```shell -git add . -git commit -m “added camera functionality” -git push ionic master -``` - -Next, we’ll look at how to transform the app into a photo gallery, as well as how to save the photos to your device! diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx b/versioned_docs/version-v5/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx deleted file mode 100644 index 30049b7017e..00000000000 --- a/versioned_docs/version-v5/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx +++ /dev/null @@ -1,193 +0,0 @@ -# Realtime App Updates with Appflow Live Updates - -As you’ve seen so far, building web and mobile apps is quick and easy with the Ionic Framework. However, nothing disrupts rapid iteration faster than App Store delays. Fortunately, with Appflow’s Deploy feature, you can send live code changes directly to your users. Paired with seamless background updates, they are always upgraded to the latest version. - -Setting it up is quick and easy. For reference, continue to refer to [the part 3 folder](https://github.com/ionic-team/photo-gallery-tutorial-ionic3/tree/master/part3) on GitHub. First, install the Appflow JavaScript library: - -```shell -npm install @ionic/pro@latest --save -``` - -Then, add the Appflow plugin. Here’s the command to install it: - -```shell -$ ionic cordova plugin add cordova-plugin-ionic@latest --save ---variable APP_ID=YOUR_APP_ID --variable CHANNEL_NAME=YOUR_CHANNEL_NAME -``` - -There are two unique values to provide: your app id and channel name. Sign into Appflow, then find the App Id on your app’s dashboard: - -![The location of the App ID in the Appflow dashboard.](/img/guides/first-app-v3/app-id-location.png 'Appflow App ID Location') - -And we’ll just use “Master” as the channel name. Putting this together looks like: - -```shell -$ ionic cordova plugin add cordova-plugin-ionic@latest --save ---variable APP_ID=381533B9 --variable CHANNEL_NAME=Master -``` - -After this plugin has been added, you’ll notice that `config.xml` and `package.json` have been updated with your app’s details: - -```xml - - - - - - - - - -``` - -Next, modify `src/app/app.module.ts` to include the initialization of Appflow on app startup: - -```javascript -import { Pro } from '@ionic/pro'; - -Pro.init('YOUR_APP_ID', { - appVersion: 'APP_VERSION', -}); -``` - -As an example, this would look like: - -```javascript -Pro.init('381533B9', { - appVersion: '0.0.1', -}); -``` - -Next, push the code up to Appflow: - -```shell -git add . -git commit -m “adding Appflow” -git push ionic master -``` - -Next, create a local, native build of the app. - -## Android Builds - -Follow the [Android Setup instructions](../../../developing/android.mdx), which includes installing Java 8 and Android Studio on your machine. Then, in your Terminal run: - -```shell -ionic cordova build android --prod -``` - -This will generate a unsigned debug build (meaning the app can run on any Android device). - -## iOS Builds - -iOS is [a bit trickier to set up](../../../developing/ios.mdx) than Android and requires a Mac computer. Ensure XCode is updated to the latest version and set up a development team. Then, in your Terminal, run: - -```shell -ionic cordova build ios --prod -``` - -Then, continue to [follow the instructions here](../../../deployment/app-store.mdx) regarding signing certificates, etc. With a native version of your app built, let’s copy it to your device of choice. - -## Add the Native App to Your Local Device - -Now comes the fun part: testing out the native app on your device! For iOS, the easiest way (that works for both PC and Mac) involves using iTunes. Connect your iOS device, locate your IPA file, then drag and drop the IPA file from the file system onto your device in iTunes. The app will install immediately and be ready for use: - -
-
- -
-
- - -For Android testing, the easiest way across all OS platforms is to use [Android Studio](https://developer.android.com/studio/), Google’s official Android IDE. After downloading it, connect your Android device to your computer. On the Studio startup screen, select “Profile or debug APK”, then select the recently built APK file. - -In the upper right hand corner, click the Play button. Select your connected device, then click OK: - -
-
- -
-
- - -## Deploying Changes - -With Appflow Deploy, any JavaScript, HTML, or CSS changes can be pushed automatically to app users. Open the Photo Gallery app in your favorite code editor, then update the title of the Gallery page: - -```html - - - Photo Viewer - - -``` - -Next, push the code up to Appflow: - -```shell -$ git add . -$ git commit -m “change name to Photo Viewer” -$ git push ionic master -``` - -Log into the [Appflow dashboard](https://dashboard.ionicframework.com) and navigate to Deploy -> Builds. You’ll see this newest commit begin to build immediately. Since we assigned the Appflow plugin to the Master branch (the one we always Git Push to), the Channel label will also point to this commit, effectively auto-deploying this change to all app users: - -![The Deploy Builds section in the Appflow dashboard.](/img/guides/first-app-v3/deploy-channel.png 'Appflow Deploy Builds') - -A Channel points to a specific JavaScript Build or Snapshot of your app that will be shared with devices listening to that channel for updates. You can change which Build a Channel points to whenever you’d like. - -Each time a user launches our Photo Gallery app, it will poll for updates from Appflow. If new code is available, the update is downloaded in the background. There are [a handful of ways](https://ionic.io/docs/appflow/deploy/api#update_method) to control how updates are performed, but by default they will be applied the next time the user closes then opens the app. - -When the latest Build has been successful, close your local copy of Photo Gallery app or put it in the background for 30 seconds (the [MIN_BACKGROUND_DURATION default](https://ionic.io/docs/appflow/deploy/api#min_background_duration)), then reopen it. The title of the Photo Gallery page should change from “Photo Gallery” to “Photo Viewer.” - -What if you deploy a change, then realize that there is a bug? Or perhaps you’re just not happy with the name “Photo Viewer?” No problem: Appflow Deploy makes it easy to roll back changes as well! - -On the Deploy Builds page, click the “Assign to Channel” button on the previous commit, then click “Deploy.” App users will be reverted to the previous version, and our “Photo Gallery” name has been restored. - -![The Deploy Builds section in Appflow with a commit labeled 'set name to Photo Gallery' being assigned to the master channel for rollback.](/img/guides/first-app-v3/deploy-revertChange.png 'Appflow Deploy Revert Change') - -This was just a taste of what you can do with Appflow Live Updates! You can also set up multiple deployment channels to send targeted updates to specific groups of users. Use it to run A/B tests, or target the distribution of updates by audience, geography, or test group. - -## Stuck on creating local native builds? - -Building native app binaries for Android and iOS can be painful. The tooling isn’t great, new OS versions often result in challenging upgrades, and creating consistent builds across your dev team can be frustrating. Fortunately, Appflow’s Package feature makes this easy: simply upload your iOS certificate and Android keystore files, then we take care of the rest! - -[Start packaging your app in the cloud](https://dashboard.ionicframework.com/settings/billing) along with 10,000 Ionic Deploys per month. - -Up next, we look at Appflow Monitoring - track your app errors in realtime. diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v3/theming.mdx b/versioned_docs/version-v5/developer-resources/guides/first-app-v3/theming.mdx deleted file mode 100644 index bc38fe59379..00000000000 --- a/versioned_docs/version-v5/developer-resources/guides/first-app-v3/theming.mdx +++ /dev/null @@ -1,47 +0,0 @@ -# Make It Your Own! Ionic Theming - -Previously, we converted our single use Camera app into an epic photo gallery. Now, let’s explore how to make the photo gallery our own with Ionic theming. The visual design of the app is incredibly important - fortunately, Ionic provides a lot for us out-of-the-box. You can find the code for this in [the “part 3” folder](https://github.com/ionic-team/photo-gallery-tutorial-ionic3/tree/master/part3) on GitHub. - -Ionic has five default colors, defined as Sass variables, that can be used to change the color of its UI components: - -![Ionic's five default Sass color variables for theming: primary, secondary, danger, light, and dark.](/img/guides/first-app-v3/v3-theming.png 'Default Ionic Sass Variables') - -You can customize each color further by supplying a base and contract property. Base acts as the background color and contrast acts as the text color for most components. This provides much more flexible control over your styles: - -![Code snippet showing customized Sass variables with base and contrast properties.](/img/guides/first-app-v3/v3-themeColors.png 'Customized Ionic Sass Variables') - -You can find these colors defined in `src/theme/variables.scss`. - -By changing these variables here and there, you can easily update the entire theme of the application! Try changing a few of them and watch the app update in DevApp. For example, change the default blue color for Primary to purple: - -```Css -$colors: ( - primary: #7044ff, -) -``` - -But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to: - -![Comparing the native look of an Ionic app on iOS and Android platforms.](/img/guides/first-app-v3/ion-lab-comparison.png 'Ionic Platform Specific Styles Comparison') - -In our app, this is clearly visible in how the header and the icons are styled. - -If you want consistency, you can tell Ionic to use the same mode regardless of platform. For example, to apply Material Design (Android’s platform style), set it globally in the App Module class. Open `src/app/app.module.ts`, then set the `mode` property: - -```Javascript -imports: [ - BrowserModule, - IonicModule.forRoot(MyApp, { - mode: "md" - }, null), - IonicStorageModule.forRoot() - ], -``` - -Now, the iOS version of our app has a Material Design skin! - -![An Ionic app with Material Design styling applied on an iOS device.](/img/guides/first-app-v3/ion-lab-md-styling.png 'Ionic Material Design Styling on iOS') - -Creating gorgeous-looking Ionic apps is easy with Sass variables and platform-specific styling. You now have everything you need to get started with Ionic. Go forth and build great apps! - -If you're interested in taking your Ionic apps to the next level, continue on with our exploration of Appflow next. diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx b/versioned_docs/version-v5/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx deleted file mode 100644 index 0417b953de6..00000000000 --- a/versioned_docs/version-v5/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx +++ /dev/null @@ -1,92 +0,0 @@ -# Track Bugs in Realtime with Ionic Monitoring - -Bugs happen, and can be hard to track down - especially with hundreds of possible combinations of mobile devices and operating systems. Appflow Monitoring allows you to track errors in your app on users’ phones and it sends them directly to you instantly, even if your code is minified! - -Reducing customer frustration by fixing major issues quickly in your production apps are a substantial part of providing a high quality app experience. Combined with Appflow Deploy, new updates can be rolled out quickly to address problems in real-time. - -To begin, let’s add a global error handler that will catch and report all unhandled exceptions that occur in the app. Open `src/app/app.module.ts`, then add two import statements: - -```javascript -import { ErrorHandler, Injectable, Injector } from '@angular/core'; -import { IonicErrorHandler } from 'ionic-angular'; -``` - -Next, create an error handler class calls the Monitoring service’s API whenever any errors have been encountered: - -```javascript -@Injectable() -export class MyErrorHandler implements ErrorHandler { - ionicErrorHandler: IonicErrorHandler; - - constructor(injector: Injector) { - try { - this.ionicErrorHandler = injector.get(IonicErrorHandler); - } catch (e) { - // Unable to get the IonicErrorHandler provider, ensure - // IonicErrorHandler has been added to the providers list below - } - } - - handleError(err: any): void { - Pro.monitoring.handleNewError(err); - - this.ionicErrorHandler && this.ionicErrorHandler.handleError(err); - } -} -``` - -Then, within the providers array, update IonicErrorHandler to MyErrorHandler: - -```javascript -{provide: ErrorHandler, useClass: MyErrorHandler}, -``` - -It should then look like: - -```javascript -providers: [ - // ... - IonicErrorHandler, - [{ provide: ErrorHandler, useClass: MyErrorHandler }], -]; -``` - -Next, let’s intentionally create a bug so we can demonstrate the power of Ionic Monitoring. Open `about.html` and rename the takePicture method to something that doesn’t exist, such as “takePhoto”: - -```html - -``` - -With this change in place, anytime a user taps on the Camera button, an exception will be thrown and sent to Ionic’s Monitoring service. - -Last, we need to need to create a Source Map for your app. This file makes it easy for Monitoring to pinpoint problems by providing stack traces that map back to the original, unminified TypeScript code. - -Sync the current version of the app by running the following: - -```shell -ionic monitoring syncmaps -``` - -With our intentional error in place, let’s try it out to see what happens. Run your app locally: - -```shell -ionic serve -``` - -Tap on the Gallery tab, then the camera button. A runtime error should occur. In a browser, head over to the [Appflow dashboard](https://dashboard.ionicframework.com), then Monitor -> Monitoring. After a few minutes, the error should appear: - -![An event showing error 'takePhoto is not a function' with status 'New'.](/img/guides/first-app-v3/monitoring-event.png 'Ionic Monitoring Event Overview') - -Clicking on the event gives us lots of details surrounding what happened, such as a full stack trace. In this instance, we see that the error occurred three times on Mac OS X in the Chrome web browser. - -![Detailed view of an event log displaying a TypeError stack trace and error details such as device, browser, and operating system.](/img/guides/first-app-v3/monitoring-details.png 'Detailed Ionic Monitoring Event Log') - -Given the proliferation of mobile devices and operating systems these days, this is immensely powerful. Armed with these details, we can hone in on the problem and fix it quickly. - -This is a TypeScript bug, meaning a fix can be released using Live Updates. Give it a try! - -- Revert the method back to “takePicture.” -- Push the fix using Git. Remember, “git push ionic master.” -- Roll out the fix using Live Updates from the Ionic dashboard. - -Supporting hundreds of mobile device types is so much easier with Appflow Monitoring. [Upgrade to the Appflow Developer plan today](https://dashboard.ionicframework.com/settings/billing) to get instant notification when bugs occur, save error history for sixty days (instead of seven), and unlock 10,000 live Deploy updates per month! diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx b/versioned_docs/version-v5/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx deleted file mode 100644 index 5e1d62fed1b..00000000000 --- a/versioned_docs/version-v5/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx +++ /dev/null @@ -1,202 +0,0 @@ -import DocsButton from '@components/page/native/DocsButton'; - -# Creating a Photo Gallery with Device Storage - -Last time, we successfully added the Camera plugin to the Tab2 page of our Tabs app. Currently, the photo is replaced each time a new one is taken. What if we wanted to display multiple photos together? Let’s create a photo gallery. You can follow along with the complete code for this [on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4). - -## Creating a Dedicated Photo Service - -From a terminal window, navigate to your Ionic project and run: - -```shell -ionic g service services/Photo -``` - -This creates a PhotoService class in a dedicated "services" folder: - -```Javascript -import { Injectable } from '@angular/core'; - -@Injectable({ - providedIn: 'root' -}) -export class PhotoService { - constructor() { } -} -``` - -Within this file, add a Photo class. The “data” property represents the base64 image data of a captured photo: - -```Javascript -class Photo { - data: any; -} -``` - -Then, create a Photos array to represent our photo gallery: - -```Javascript -export class PhotoService { - - public photos: Photo[] = []; - - constructor() { } -} -``` - -Back in `tab2.page.ts`, import PhotoService: - -```Javascript -import { PhotoService } from '../services/photo.service'; -``` - -Add it to the Constructor: - -```Javascript -constructor(private camera: Camera, public photoService: PhotoService) { } -``` - -Next, move all code pertaining to the Camera plugin to the PhotoService class. This includes the takePicture method, the Camera and CameraOptions imports, and the Tab2Page page constructor. - -Continuing on, we need to convert currentImage variable references to the new photos array. Start by adding the captured photo data into the photos array: - -```Javascript -this.camera.getPicture(options).then((imageData) => { - // Add new photo to gallery - this.photos.unshift({ - data: 'data:image/jpeg;base64,' + imageData - }); }, (err) => { - // Handle error - console.log("Camera issue: " + err); -}); -``` - -In `tab2.page.ts`, remove the currentImage variable and the reference to Camera in the constructor, leaving only PhotoService: - -```Javascript -export class Tab2Page { - constructor(public photoService: PhotoService) { } -} -``` - -Next, in `tab2.page.html`, remove the currentImage img tag. In its place, use an ion-grid component, which provides a great way to arrange elements on a page. In this case, we’ll use it to display 2 photos per row. - -```html - - - - - - - -``` - -Here, we loop through each photo in the PhotoServices photos array, adding a new column for each. Since an ion-row consists of 12 “blocks” of space, and we’re setting the size to 6 (`size="6"`), only 2 photos are displayed per row. - -Last, update the Fab button to call the PhotoService’s `takePicture` method: - -```Html - - - -``` - -Excellent! We now have a basic photo gallery working. - -## Saving photos to the device - -Having a working photo gallery is pretty cool, but you’ll likely notice that when the app is closed, the photos are lost forever. That’s no good, so let’s add the [Ionic Storage plugin](https://ionicframework.com/docs/storage/), as easy way to store key/value pairs and JSON objects. When running in a native app context, Storage will prioritize using SQLite, one of the most stable and widely used file-based databases. When running on the web or as a Progressive Web App, Storage will attempt to use IndexedDB, WebSQL, and localstorage, in that order. - -The Storage plugin works perfectly for our base64 image data. To begin, add the SQLite plugin for native: - -```shell -ionic cordova plugin add cordova-sqlite-storage -``` - -Next, add the JavaScript library for the web: - -```shell -npm install --save @ionic/storage -``` - -Last, import the Storage module and add it to the imports list in `app.module.ts`: - -```Javascript -import { IonicStorageModule } from '@ionic/storage'; - -@NgModule({ - declarations: [AppComponent], - entryComponents: [], - imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, - IonicStorageModule.forRoot() - ], - providers: [ - StatusBar, - SplashScreen, - Camera, - { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } - ], - bootstrap: [AppComponent] -}) -export class AppModule {} -``` - -It’s now ready to be used in our PhotoService class. Import it: - -```Javascript -import { Storage } from '@ionic/storage-angular'; -``` - -Then inject it via the constructor: - -```Javascript -constructor(private camera: Camera, private storage: Storage) { } -``` - -To add the capability to save photos, there’s only a couple steps left. Update the `takePicture()` method to save the entire photos array after each photo is taken using the storage.set method: - -```Javascript -this.camera.getPicture(options).then((imageData) => { - // Add new photo to gallery - this.photos.unshift({ - data: 'data:image/jpeg;base64,' + imageData - }); - - // Save all photos for later viewing - this.storage.set('photos', this.photos); -}, (err) => { - // Handle error - console.log("Camera issue: " + err); -}); -``` - -We still need to load the saved photos when the app is first opened. This is simple enough - retrieve the “photos” key then assign its value to the photos array: - -```Javascript -loadSaved() { - this.storage.get('photos').then((photos) => { - this.photos = photos || []; - }); -} -``` - -Over in the Tab2 page, call the loadSaved method once it begins loading: - -```Javascript -ngOnInit() { - this.photoService.loadSaved(); -} -``` - -Sweet! Photos are now saved to your device. To demonstrate that they are indeed being saved, force close DevApp, reopen it, and open the Tab2 page. Or, shake your device to have the Control Menu pop up, then tap “Exit preview.” Afterwards, reload this app to view the photos. - -Next up, we’ll look at how to apply a custom theme to an Ionic app. - -
- - Continue{' '} - - - - -
diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v4/intro.mdx b/versioned_docs/version-v5/developer-resources/guides/first-app-v4/intro.mdx deleted file mode 100644 index 7916776c975..00000000000 --- a/versioned_docs/version-v5/developer-resources/guides/first-app-v4/intro.mdx +++ /dev/null @@ -1,97 +0,0 @@ -# Your First Ionic App: Angular - -The great thing about Ionic is that with one codebase, you can build for any platform using familiar web tools and languages. Follow along as we create a working Photo Gallery. Here’s the before and after: - -![An Ionic app's transformation from a blank 'Tab Two' to a 'Photo Gallery' with images.](/img/guides/first-app-v3/gallery-combined.png 'Ionic App Before and After Photo Gallery') - -It’s easy to get started. Note that all code referenced in this guide can be [found on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4/). - -## Required Tools - -Download/install these right away to ensure an optimal Ionic development experience: - -- [Git](https://git-scm.com/downloads) for version control. -- SSH client, such as [PuTTy](https://putty.software/), for secure login to Appflow. -- Node.js for interacting with the Ionic ecosystem. [Download the LTS version here](https://nodejs.org/en/). -- A code editor for... writing code! We are fans of [Visual Studio Code](https://code.visualstudio.com/). -- Command-line terminal (CLI): FYI Windows users, for the best Ionic experience, we - recommend the built-in command line (cmd) or the Powershell CLI, running in Administrator mode. For - Mac/Linux - users, virtually any terminal will work. - -## Install Ionic and Cordova - -Run the following in the command line: - -```shell -npm install -g @ionic/cli cordova -``` - -:::note -The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur. - -Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../../../developing/tips.mdx#resolving-permission-errors) for more information. -::: - -## Create an App - -Next, create an Ionic Angular app using our “Tabs” app template: - -```shell -ionic start photo-gallery tabs -``` - -This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily! - -Next, change into the app folder: - -```shell -cd photo-gallery -``` - -That’s it! Now for the fun part - let’s see the app in action. - -## Run the App - -Run this command next: - -```shell -ionic serve -``` - -And voilà! Your Ionic app is now running in a web browser. Most of your app can be built right in the browser, greatly increasing development speed. - -## Photo Gallery!!! - -There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to add camera functionality. Let’s begin to transform this page into a Photo Gallery. Ionic features LiveReload, so when you make changes and save them, the app is updated immediately! - -![Animated GIF demonstrating the LiveReload feature in Ionic, showing real-time updates in the app after code changes.](/img/guides/first-app-v3/email-photogallery.gif 'Ionic LiveReload Feature Demonstration') - -Open the photo-gallery app folder in your favorite code editor of choice, then navigate to `/src/app/tab2/tab2.page.html`. We see: - -```html - - - Tab Two - - - - -``` - -`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title. We put our app code into `ion-content`. In this case, it’s where we’ll add a button that opens the device’s camera and shows the image captured by the camera. But first, let’s start with something obvious: renaming the Tab Two page: - -```html -Photo Gallery -``` - -Next, open `src/app/tabs/tabs.page.html`. Change the label to “Gallery” and the icon name to “images”: - -```html - - - Gallery - -``` - -That’s just the start of all the cool things we can do with Ionic. Up next, we’ll deploy the app to your iOS or Android device, then continue building the photo gallery. diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v4/ios-android-camera.mdx b/versioned_docs/version-v5/developer-resources/guides/first-app-v4/ios-android-camera.mdx deleted file mode 100644 index d5c4dfcb129..00000000000 --- a/versioned_docs/version-v5/developer-resources/guides/first-app-v4/ios-android-camera.mdx +++ /dev/null @@ -1,154 +0,0 @@ -# Android, iOS, and the Camera - Oh My! - -Previously, we got an Ionic app up and running locally in a web browser. Now, let’s get it onto your iOS or Android device, then start building the photo gallery feature. - -## Add Cordova iOS and Android Platforms - -Ionic leverages the open source [Cordova project](https://cordova.apache.org/docs/en/latest/guide/overview/) to provide native hardware support. We begin by adding the iOS and Android _platforms_ then will add specific _plugins_ like the Camera afterwards: - -```shell -$ ionic cordova platform add ios -$ ionic cordova platform add android -``` - -These commands will create a `config.xml` file, which is used to define Cordova iOS and Android settings. Cordova reads this file and applies each setting as it builds each native app binary. - -There are more steps to configure [iOS](../../../developing/ios.mdx) and [Android](../../../developing/android.mdx) native tooling. - -Much better! Now we can add the camera functionality. By the way, you can find reference code for this [on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4). - -Back in `tab2.page.html`, add the following: - -```html - - - - - - - - - -``` - -Save the file and watch - a camera button appears! Tap on it and notice that it doesn’t do anything. Let’s fix that next. - -## Add the Camera Dependencies via the CLI - -In order to use the Camera, we need to bring in its JavaScript and native library dependencies. Back over in your Terminal window, run the following command, which adds the JavaScript library to the project, thus exposing the Camera API in TypeScript code: - -```shell -npm install @awesome-cordova-plugins/camera -``` - -In `package.json`, you’ll notice a new JavaScript dependency has been added, with a version number similar to the following: - -`"@awesome-cordova-plugins/camera": "^5.4.0"` - -Next, run this command to add the native iOS and Android code, effectively allowing the Camera to work on a mobile device. For more info on how this works, read up on [Cordova](https://cordova.apache.org/docs/en/latest/guide/overview/) and [Ionic Native](https://ionicframework.com/docs/native). - -```shell -ionic cordova plugin add cordova-plugin-camera -``` - -The `config.xml` file is now updated with an entry similar to the following for the native camera code: - -```xml - -``` - -The next step is only required for iOS users. As of iOS 10, developers must provide a reason for why the app wishes to access the device camera. Add this inside the ios platform section () of `config.xml`: - -```xml - - - Used to take pictures - -``` - -## Add Camera plugin to Angular App Module - -There’s one more step we need to do since this is an Angular project: register the Camera in the App Module (`src/app/app.module.ts`). First, import the Camera module: - -```Javascript -import { Camera } from '@awesome-cordova-plugins/camera/ngx'; -``` - -Then, add it as a Provider: - -```Javascript -providers: [ - StatusBar, - SplashScreen, - Camera, - {provide: ErrorHandler, useClass: IonicErrorHandler} - ], -``` - -It can now be used on any of our App pages. - -## Add the Camera to the Gallery page - -Our camera button doesn’t do anything yet. Over in `tab2.page.html`, add a click handler to the button: - -```html - - - - - -``` - -Then, update the image placeholder. The following binds the “currentImage” variable (which we’ll work on next) to the image to display to the user. - -```html - -``` - -Open `tab2.page.ts` next and import the Camera library: - -```Javascript -import { Camera, CameraOptions } from '@awesome-cordova-plugins/camera/ngx'; -``` - -Next, define the “currentImage” variable and inject the Camera into this class via the constructor: - -```Javascript -export class Tab2Page { - currentImage: any; - - constructor(private camera: Camera) { } -} -``` - -Finally, add the “takePicture” method in `tab2.page.ts`. It is already wired up to execute once the camera button has been tapped: - -```Javascript -export class Tab2Page { - currentImage: any; - - constructor(private camera: Camera) { } - - takePicture() { - const options: CameraOptions = { - quality: 100, - destinationType: this.camera.DestinationType.DATA_URL, - encodingType: this.camera.EncodingType.JPEG, - mediaType: this.camera.MediaType.PICTURE - }; - - this.camera.getPicture(options).then((imageData) => { - this.currentImage = 'data:image/jpeg;base64,' + imageData; - }, (err) => { - // Handle error - console.log("Camera issue:" + err); - }); - } -} -``` - -Take notice: there’s no mention of iOS or Android! This is the awesome power of plugins: you use one API (`camera.getPicture()` in this case) and the plugin takes care of the platform differences for you. Write once, run everywhere. 😀 - -Save this file then tap the Camera button in DevApp. Voila! The camera should open on your device. Once a photo has been taken, it displays on the Photo Gallery page. - -Next, we’ll look at how to transform the app into a photo gallery, as well as how to save the photos to your device! diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v4/theming.mdx b/versioned_docs/version-v5/developer-resources/guides/first-app-v4/theming.mdx deleted file mode 100644 index c55d591b308..00000000000 --- a/versioned_docs/version-v5/developer-resources/guides/first-app-v4/theming.mdx +++ /dev/null @@ -1,56 +0,0 @@ -# Make It Your Own! Ionic Theming - -Previously, we converted our single use Camera app into an epic photo gallery. Now, let’s explore how to make the photo gallery our own with Ionic theming. The visual design of the app is incredibly important - fortunately, Ionic provides a lot for us out-of-the-box. - -Ionic has nine default colors, defined as CSS variables, that can be used to change the color of its UI components: - -![A chart showing Ionic's nine default colors with their hex codes.](/img/guides/first-app-v4/theming-defaults.png 'Ionic Default Color Palette') - -You can customize each color further by supplying a base, contrast, shade, and tint properties. These provide flexible control over your styles: - -![Table detailing the properties for customizing the primary color in Ionic, including base, contrast, shade, and tint.](/img/guides/first-app-v4/theming-properties.png 'Ionic Color Customization Properties') - -You can find these colors defined in `src/theme/variables.scss`. - -By changing these variables here and there, you can easily update the entire theme of the application! Try changing a few of them and watch the app update in DevApp. For example, change the default blue color for Primary to purple: - -```css -/** Ionic CSS Variables **/ -:root { - /** primary **/ - --ion-color-primary: #b36bff; - --ion-color-primary-rgb: 179, 107, 255; - --ion-color-primary-contrast: #000000; - --ion-color-primary-contrast-rgb: 0, 0, 0; - --ion-color-primary-shade: #9e5ee0; - --ion-color-primary-tint: #bb7aff; -} -``` - -The easiest and most powerful way to create custom color palettes for your app’s UI is Ionic's [Color Generator tool](../../../theming/color-generator.mdx). As you change a color’s hex values, the embedded demo app automatically reflects the new colors. When you've finished making changes, simply copy and paste the generated code directly into your Ionic project. - -But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to: - -![Comparing the native look of an Ionic app on iOS and Android platforms.](/img/guides/first-app-v3/ion-lab-comparison.png 'Ionic Platform Specific Styles Comparison') - -In our app, this is clearly visible in how the header and the icons are styled. - -If you want consistency, you can tell Ionic to use the same mode regardless of platform. For example, to apply Material Design (Android’s platform style), set it globally in the App Module class. Open `src/app/app.module.ts`, then set the `mode` property: - -```Javascript -imports: [ - BrowserModule, - IonicModule.forRoot({ - mode: "md" - }), - IonicStorageModule.forRoot() - ], -``` - -Now, the iOS version of our app has a Material Design skin! - -![An Ionic app with Material Design styling applied on an iOS device.](/img/guides/first-app-v3/ion-lab-md-styling.png 'Ionic Material Design Styling on iOS') - -Creating gorgeous-looking Ionic apps is easy with CSS variables and platform-specific styling. You now have everything you need to get started with Ionic. - -Go forth and build great apps! diff --git a/versioned_docs/version-v5/developer-resources/posts.mdx b/versioned_docs/version-v5/developer-resources/posts.mdx deleted file mode 100644 index a8c5b3f861c..00000000000 --- a/versioned_docs/version-v5/developer-resources/posts.mdx +++ /dev/null @@ -1,77 +0,0 @@ ---- -sidebar_label: Posts ---- - -# Community Posts - -### [What's new in Ionic 5 - Migration and Free Starter](https://ionicthemes.com/tutorials/about/ionic5-tutorial-migration-and-starter) - -Take advantage of the new benefits from Ionic 5. In this guide we describe the main changes and show you how to migrate your applications from Ionic 4 to Ionic 5. For this post we created an Ionic 5 CRUD Contacts app that you can download for free to learn how to start using Ionic 5. - -### [Ionic Navigation and Angular Routing](https://ionicthemes.com/tutorials/about/ionic-navigation-and-routing-ultimate-guide) - -Learn how to master Routing and Navigation in Ionic Angular Apps as well as some usability tricks you can add to your apps to improve the user experience! - -### [Firebase Authentication Tutorial For Ionic Apps](https://ionicthemes.com/tutorials/about/firebase-authentication-in-ionic-framework-apps) - -Learn how to add Firebase Authentication to your Ionic 5 App. This tutorial explains step by step how to configure both the Firebase and the Ionic Apps to enable authentication with social providers such as Google, Facebook and Twitter and also with Email and Password. - -### [Native Cross Platform Web Apps with Ionic Capacitor](https://ionicthemes.com/tutorials/about/native-cross-platform-web-apps-with-ionic-capacitor) - -Ionic Capacitor introduction guide for beginners: history, motivation, usage and how to migrate your existing Cordova apps to Capacitor. - -### [Ionic Skeleton Loading Screens](https://ionicthemes.com/tutorials/about/improved-ux-for-ionic-apps-with-skeleton-loading-screens) - -UI Skeletons, Ghost Elements, Shell Elements? They are all the same! Think of them as cool content placeholders that are shown where the content will eventually be once it becomes available. In this guide you will learn the importance of adopting the App Shell pattern in your ionic apps and discuss how to implement it using Ionic and Angular. Also, we explain some advanced CSS techniques to take the UX to the next level. - -### [The Complete Guide To Progressive Web Apps with Ionic](https://ionicthemes.com/tutorials/about/the-complete-guide-to-progressive-web-apps-with-ionic4) - -Learn what Progressive Web Apps are, why you should consider them for your next project, and how easy is to build a complete and production ready PWA with Ionic. - -### [Mastering Web Components in Ionic](https://ionicthemes.com/tutorials/about/ionic-4-tutorial-mastering-web-components-in-ionic-4) - -Understanding the new component architecture in Ionic, including web components, shadow DOM, CSS 4 variables and Stencil. - -### [Forms and Validations in Ionic 5](https://ionicthemes.com/tutorials/about/forms-and-validation-in-ionic) - -Learn everything about Ionic Forms and input validations in Ionic Angular apps. - -### [Building a Ionic Firebase App step by step](https://ionicthemes.com/tutorials/about/building-a-ionic-firebase-app-step-by-step) - -Learn how to make a CRUD application using Ionic Framework, Cloud Firestore for the database, and Cloud Storage for image storage. - -### [Ionic and WordPress Integration using the WordPress REST API](https://ionicthemes.com/tutorials/about/ionic-wordpress-integration) - -Learn how to connect your Ionic app with your WordPress site using the WordPress REST API. - -### [Understanding Ionic 2: Imports](http://mcgivery.com/understanding-ionic-2-imports/) - -ES6/TS introduce a new way to bring in external code. Learn about Imports. - -### [Ionic 2 / Angular 2 Concepts](https://www.joshmorony.com/ionic-2-first-look-series-new-angular-2-concepts-syntax/) - -Familiarize yourself with some of the new concepts in Ionic 2 and Angular 2. - -### [Ionic, PouchDB, & SQLite For Storage](http://gonehybrid.com/how-to-use-pouchdb-sqlite-for-local-storage-in-ionic-2/) - -Simplify storage using PouchDB and Sqlite. - -### [Advanced Google Maps](https://www.joshmorony.com/creating-an-advanced-google-maps-component-in-ionic-2/) - -Go beyond adding a simple map to handling offline conditions and complex maps. - -### [Background Geolocation](https://www.joshmorony.com/adding-background-geolocation-to-an-ionic-2-application/) - -Learn how to add geolocation that can run in the background of your app. - -### [Taking Advantage of Observables](https://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html) - -Learn how to use observables in your Ionic 2 app. - -### [Using the Angular Router in ionic/angular 4](https://www.joshmorony.com/using-angular-routing-with-ionic-4/) - -Learn how to use the Angular Router in your `@ionic/angular` 4 app. - -### [Ionic 4 examples using Angular, Vue and React](https://ionicworkshop.com/posts/introduction-to-ionic-framework-angular-vue-react/) - -Learn how to use Ionic 4 with Angular, React and Vue. diff --git a/versioned_docs/version-v5/developer-resources/tools.mdx b/versioned_docs/version-v5/developer-resources/tools.mdx deleted file mode 100644 index aa1a7301ba9..00000000000 --- a/versioned_docs/version-v5/developer-resources/tools.mdx +++ /dev/null @@ -1,21 +0,0 @@ -# Tools - -### [Angular CLI](https://github.com/angular/angular-cli) - -Learn more about the power of the Angular CLI - -### [StackBlitz](https://stackblitz.com/) - -Quickly get started with a new Ionic app entirely in the browser! - -### [TypeScript](https://www.typescriptlang.org/) - -Check out the features that make working with TypeScript amazing. - -### [Glossary](../reference/glossary.mdx) - -A list of common terms you'll see while developing in Ionic. - -### [Starter Apps](https://ionicthemes.com) - -Ionic Starter Apps to speed up and improve your app development. diff --git a/versioned_docs/version-v5/developer-resources/videos.mdx b/versioned_docs/version-v5/developer-resources/videos.mdx deleted file mode 100644 index bdc0a784d25..00000000000 --- a/versioned_docs/version-v5/developer-resources/videos.mdx +++ /dev/null @@ -1,21 +0,0 @@ -# Videos - -### [Ionic 2 Crash Course](https://www.youtube.com/watch?v=O2WiI9QrS5s&feature=youtu.be) - -A quick introduction to Ionic 2 and how to build your first app. - -### [Ionic & Async](https://blog.ionicframework.com/screencast-ionic-async/) - -Learn how to coordinate multiple events in a timely manner. - -### [Building a TODO app in Ionic 2](http://www.joshmorony.com/build-a-todo-app-from-scratch-with-ionic-2-video-tutorial/) - -Learn how to build out an entire Ionic 2 app. - -### [Angular Connect: Ionic 2](https://www.youtube.com/watch?v=bAlydPwFONY) - -Dive into some of the ideas and goals behind Ionic 2. - -### [Ionic & Typings](https://blog.ionicframework.com/ionic-and-typings/) - -Learn how to add typings for libraries you are using in your Ionic 2 app. diff --git a/versioned_docs/version-v5/intro/first-app.mdx b/versioned_docs/version-v5/intro/first-app.mdx deleted file mode 100644 index 3fc9be2b1fd..00000000000 --- a/versioned_docs/version-v5/intro/first-app.mdx +++ /dev/null @@ -1,24 +0,0 @@ ---- -hide_table_of_contents: true ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsCards from '@components/global/DocsCards'; - -# Build Your First App Tutorial - -Pick the JavaScript framework you plan to use while building your Ionic app: - - - -

A complete guide to get you up to speed with the basics of building Ionic apps with Angular.

- - - -

A complete guide to get you up to speed with the basics of building Ionic apps with React.

- - - -

A complete guide to get you up to speed with the basics of building Ionic apps with Vue.

- - diff --git a/versioned_docs/version-v5/test/page1.mdx b/versioned_docs/version-v5/test/page1.mdx deleted file mode 100644 index cd5b72410d0..00000000000 --- a/versioned_docs/version-v5/test/page1.mdx +++ /dev/null @@ -1,3 +0,0 @@ -# Testing Page 1 - -This is Testing page 1, Get to Testing Page 2 [here](page2.mdx). diff --git a/versioned_docs/version-v5/test/page2.mdx b/versioned_docs/version-v5/test/page2.mdx deleted file mode 100644 index 5ebdef8dca0..00000000000 --- a/versioned_docs/version-v5/test/page2.mdx +++ /dev/null @@ -1,3 +0,0 @@ -# Testing Page 2 - -This is Testing page 2, Get to Testing Page 1 [here](page1.mdx). diff --git a/versioned_docs/version-v6/angular/your-first-app.mdx b/versioned_docs/version-v6/angular/your-first-app.mdx index bbd710f7b51..24a155ea090 100644 --- a/versioned_docs/version-v6/angular/your-first-app.mdx +++ b/versioned_docs/version-v6/angular/your-first-app.mdx @@ -24,10 +24,6 @@ Here’s the finished app running on all 3 platforms: allowFullScreen > -:::note -Looking for the previous version of this guide that covered Ionic 4 and Cordova? [See here.](../developer-resources/guides/first-app-v4/intro.mdx) -::: - ## What We'll Build We'll create a Photo Gallery app that offers the ability to take photos with your device's camera, display them in a grid, and store them permanently on the device. diff --git a/versioned_docs/version-v6/developer-resources/books.mdx b/versioned_docs/version-v6/developer-resources/books.mdx deleted file mode 100644 index e3eae671a5a..00000000000 --- a/versioned_docs/version-v6/developer-resources/books.mdx +++ /dev/null @@ -1,75 +0,0 @@ -# Books - -### [Learn Ionic 4 From Scratch](https://leanpub.com/learnionic4fromscratch) - -Angular. Vue. React. Vanilla JavaScript. All of these tools can be used to create awesome applications with Ionic, thanks to the new Stencil compiler. This book is aimed at beginners that are looking to create amazing web, mobile and desktop applications using Ionic with examples across all of the popular frameworks. - -{/* cspell:disable-next-line */} - -by [Paul Halliday](https://developer.school) - -### [Creating Ionic Applications with StencilJS](https://www.joshmorony.com/creating-ionic-applications-with-stencil-js/) - [Free Preview](https://cdn2.hubspot.net/hubfs/3776657/PREVIEW-Creating-Ionic-Apps-with-StencilJS.pdf) - -As well as being a powerful tool for generating reuseable web components, StencilJS provides the tools needed to build an entire application out of web components. Combined with the Ionic web components, StencilJS gives us everything we need to build high-quality production mobile applications - no framework required. - -{/* cspell:disable-next-line */} - -by [Joshua Morony](https://www.joshmorony.com/blog) - -### [Mobile App Development with Ionic: Cross-Platform Apps with Ionic 2, Angular 2, and Cordova](https://www.amazon.com/Mobile-App-Development-Ionic-Cross-Platform/dp/1491937785/ref=sr_1_2?ie=UTF8&qid=1464183332&sr=8-2&keywords=ionic+2) - -{/* cspell:disable-next-line */} - -by Chris Griffith - -### [Building Mobile Apps with Ionic & Angular](https://www.joshmorony.com/building-mobile-apps-with-ionic-2/) - -{/* cspell:disable-next-line */} - -by [Joshua Morony](https://www.joshmorony.com/blog) - -Building Mobile Apps with Ionic & Angular is an all-in-one resource for learning the latest and greatest version of Ionic. It is targeted at beginners and works its way through the basics of Ionic, to example applications of varying complexity, and then to the steps required to build and publish your application (on the app stores or as a PWA). It has been updated for every major release, so you can rest easy knowing that you're not learning outdated tech. - -### [Ionic 2 From Zero to App Store](https://devdactic.com/zero-to-app) - -{/* cspell:disable-next-line */} - -by Simon Reimler - -### [Ionic Framework By Example](https://www.packtpub.com/application-development/ionic-framework-example) - -{/* cspell:disable-next-line */} - -by Sani Yusuf - -### [Building Firestore Powered Ionic Apps](https://javebratt.com/ionic-firebase-book/) - -{/* cspell:disable-next-line */} - -by Jorge Vergara - -This book will help you go from not knowing what Firebase is to be able to use the different APIs for your Ionic Applications. It will take you from “_What’s Firebase?_” to building scalable, production-ready apps and it’s always up-to-date with latest Ionic and Firebase versions. - -### [Ionic 2 Cookbook - Second Edition](https://www.amazon.com/Ionic-Cookbook-Second-Hoc-Phan-ebook/dp/B01C4D9VWS?ie=UTF8&keywords=ionic%202&qid=1464183332&ref_=sr_1_3&sr=8-3) - -{/* cspell:disable-next-line */} - -by Hoc Phan - -### [Mastering Ionic 2](https://www.leanpub.com/masteringionic2) - -{/* cspell:disable-next-line */} - -by James Griffiths - -### [Learning Ionic](https://www.packtpub.com/in/application-development/learning-ionic) (Ionic 1) - -{/* cspell:disable-next-line */} - -by Arvind Ravulavaru - -### [Learning Ionic - Second Edition](https://www.packtpub.com/in/web-development/learning-ionic-second-edition) (Ionic 2/3) - -{/* cspell:disable-next-line */} - -by Arvind Ravulavaru diff --git a/versioned_docs/version-v6/developer-resources/courses.mdx b/versioned_docs/version-v6/developer-resources/courses.mdx deleted file mode 100644 index 568f0fc05a4..00000000000 --- a/versioned_docs/version-v6/developer-resources/courses.mdx +++ /dev/null @@ -1,107 +0,0 @@ -# Courses - -### [Elite Ionic](https://www.joshmorony.com/elite/) - -{/* cspell:disable-next-line */} - -by Josh Morony - -Elite Ionic is an online course for Ionic developers who want to move past the basics, and build complex, well tested, high performing, beautiful, and useable mobile applications. It is recommended that you already have a reasonably solid understanding of the basics of Ionic before starting this course. - -### [Ionic Academy](https://ionicacademy.com/) - -{/* cspell:disable-next-line */} - -by Simon Grimm - -Learn Ionic with step-by-step video courses & quick wins from one of the Ionic community leaders. Covers beginner, intermediate and advanced topics. Get access to a community of developers just like you. - -### [Ionic Framework: Tips, Tricks & Techniques](https://www.packtpub.com/mobile/ionic-framework-tips-tricks-and-techniques-video) - -{/* cspell:disable-next-line */} - -by Charles Muzonzini - -In this course, you will master tips and best practices for Ionic 4 & Ionic 5 that you can immediately implement to build high quality apps. This course covers a wide variety of topics from increasing app performance, to building custom native plugins, to securing your apps. It's a practical, hands-on course that will take your app building skills to the next level. - -### [Building Desktop Apps with Ionic and Electron](https://pluralsight.pxf.io/VeMXO) - -{/* cspell:disable-next-line */} - -by Michael Callaghan at Pluralsight - -Desktop development has historically required dramatically different skills than those required for web -development. The two disciplines don't mesh well. In this course, Building Desktop Apps with Ionic and Electron, -you will gain the ability to apply your hard-earned web development skills to build amazing desktop -applications. First, you will learn how to build a functional and attractive UI with Ionic and Angular. Next, -you will discover how to wrap that UI into an Electron application shell. Finally, you will explore how to -package your app and make it ready for distribution. When you are finished with this course, you will have the -skills and knowledge of Ionic and Electron development needed to deploy and distribute a beautiful app to both -Windows and macOS users. - -### [Building Progressive Web Apps with Ionic](https://pluralsight.pxf.io/Ly2EY) - -{/* cspell:disable-next-line */} - -by Michael Callaghan at Pluralsight - -Everything changed when Google created the concept of Progressive Web Applications or PWA. A PWA is a pure web -application that you can install on devices, that can function with limited network functionality, through its -use of intelligent caching. Build a Progressive Web App that will run anywhere. In this course, Building -Progressive Web Apps with Ionic, you will learn foundational knowledge and gain the ability to create a web -application that will run anywhere: the browser, desktop, or mobile clients. First, you will learn what a -Progressive Web App (or PWA) is. Next, you will discover how to use the Ionic Framework, Angular, and Firebase -to create, deploy, and optimize a basic web application into a full-blown PWA. Finally, you will explore how to -configure the application to make it installable and runnable on Androids and iPhones. When you’re finished with -this course, you will have the skills and knowledge of Ionic and PWAs needed to create and deploy your own -Progressive Web Application anywhere you desire. - -### [Ionic CLI](https://pluralsight.pxf.io/ionic-cli) - -{/* cspell:disable-next-line */} - -by Michael Callaghan at Pluralsight - -Since its inception, the Ionic Framework has included a rudimentary command line interface. Though only a few -years old, it has matured into a powerful tool that should be part of every developer’s toolbox. This course, -Ionic CLI, will start at the top and explore the Ionic CLI. First, you'll see how to create projects and -components. Next, you will learn how to build and serve apps. Finally, you'll discover how to share projects -with others, and even integrate with other build tools. Whether you’re just starting to explore Ionic, or have -been using it since its pre-beta days, there is something here for you. By the end of the course, you’ll have -the confidence to use the Ionic CLI as part of your everyday Ionic development. - -### [Wordpress Rest API and Ionic 4 (Angular) App With Auth](https://www.udemy.com/course/wordpress-rest-api-and-ionic-3-crud/) - -{/* cspell:disable-next-line */} - -by Baljeet Singh at Udemy - -### [Building Mobile Apps with Ionic 2, Angular 2, and TypeScript](https://app.pluralsight.com/library/courses/ionic2-angular2-typescript-mobile-apps/table-of-contents) - -{/* cspell:disable-next-line */} - -by Pluralsight - -### [Introducing Ionic 2](http://shop.oreilly.com/product/0636920050353.do) - -{/* cspell:disable-next-line */} - -by Mathieu Chauvinc - -### [Ionic 2 Master Course](https://www.udemy.com/ionic-2-tutorial/) - -{/* cspell:disable-next-line */} - -by Udemy - -### [Introducing Ionic 2](https://www.udemy.com/introducing-ionic-2/) - -{/* cspell:disable-next-line */} - -by Udemy - -### [Ionic 2 Solutions](https://www.packtpub.com/web-development/ionic-2-solutions-video) - -{/* cspell:disable-next-line */} - -by Hoc Phan diff --git a/versioned_docs/version-v6/developer-resources/guides.mdx b/versioned_docs/version-v6/developer-resources/guides.mdx deleted file mode 100644 index c0590b83684..00000000000 --- a/versioned_docs/version-v6/developer-resources/guides.mdx +++ /dev/null @@ -1,9 +0,0 @@ -# Guides - -### [Your First Ionic App - v3](guides/first-app-v3/intro.mdx) - -Follow along as we create a working Photo Gallery app using Ionic Framework v3 and Appflow. - -### [Your First Ionic 4 App - Angular and Cordova](guides/first-app-v4/intro.mdx) - -Follow along as we create a working Photo Gallery app using Ionic Framework v4 and Cordova. diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx deleted file mode 100644 index 7887f03a320..00000000000 --- a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx +++ /dev/null @@ -1,195 +0,0 @@ -# Creating a Photo Gallery with Device Storage - -Last time, we successfully added the Camera plugin to the About page of our Tabs app. Currently, the photo is replaced each time a new one is taken. What if we wanted to display multiple photos together? Let’s create a photo gallery. You can follow along with the complete code for this in [the part 2 folder](https://github.com/ionic-team/photo-gallery-tutorial-ionic3/tree/master/part2) on GitHub. - -## Creating a Dedicated Photo Service - -From a terminal window, navigate to your Ionic project and run: - -```shell -ionic g provider PhotoProvider -``` - -This creates a PhotoProvider class in a dedicated providers/photo folder: - -```Javascript -import { HttpClient } from '@angular/common/http'; -import { Injectable } from '@angular/core'; - -/* - Generated class for the PhotoProvider provider. - - See https://angular.io/guide/dependency-injection for more info on providers - and Angular DI. -*/ -@Injectable() -export class PhotoProvider { - - constructor(public http: HttpClient) { - console.log('Hello PhotoProvider Provider'); - } -} -``` - -Within this class, add a Photo class. The “data” property represents the base64 image data of a captured photo: - -```Javascript -class Photo { - data: any; -} -``` - -Then, create a Photos array to represent our photo gallery: - -```Javascript -export class PhotoProvider { - - public photos: Photo[] = []; - - constructor() { } -} -``` - -Back in `about.ts`, import PhotoProvider: - -```Javascript -import { PhotoProvider } from '../../providers/photo/photo'; -``` - -Add it to the Constructor: - -```Javascript -constructor(private camera: Camera, public photoService: PhotoProvider) { } -``` - -Next, move all code pertaining to the Camera plugin to the PhotoService class. This includes the takePicture method, the Camera import, and the About page constructor. Also, remove references to HttpClient - we won’t be making any HTTP calls. - -Continuing on, we need to convert currentImage variable references to the new photos array. Start by adding the captured photo data into the photos array: - -```Javascript -this.camera.getPicture(options).then((imageData) => { - // Add new photo to gallery - this.photos.unshift({ - data: 'data:image/jpeg;base64,' + imageData - }); }, (err) => { - // Handle error - console.log("Camera issue: " + err); -}); -``` - -In `about.page.ts`, remove the currentImage variable and the reference to Camera in the constructor, leaving only PhotoService: - -```Javascript -export class AboutPage { - constructor(public navCtrl: NavController, public photoService: PhotoProvider) { } -} -``` - -Next, in `about.page.html`, remove the currentImage img tag. In its place, use an ion-grid component, which provides a great way to arrange elements on a page. In this case, we’ll use it to display 2 photos per row. - -```html - - - - - - - -``` - -Here, we loop through each photo in the PhotoServices photos array, adding a new column for each. Since an ion-row consists of 12 “blocks” of space, and we’re setting the size to 6 (“col-6”), only 2 photos are displayed per row. - -Last, update the Fab button to call the PhotoProvider’s `takePicture` method: - -```Html - - - -``` - -Save the file and watch - a camera button appears! Tap on it and notice that it doesn’t do anything. Let’s fix that next. - -## Add the Camera Dependencies via the CLI - -In order to use the Camera, we need to bring in its JavaScript and native library dependencies. Back over in your Terminal window, run the following command, which adds the JavaScript library to the project, thus exposing the Camera API in TypeScript code: - -```shell -npm install --save @awesome-cordova-plugins/camera -``` - -In `package.json`, you’ll notice a new JavaScript dependency has been added: - -`"@awesome-cordova-plugins/camera": "^4.12.0"` - -Next, run this command to add the native iOS and Android code, effectively allowing the Camera to work on a mobile device: - -```shell -ionic cordova plugin add cordova-plugin-camera -``` - -In `config.xml`, a new plugin entry is created: - -```xml - -``` - -The next step is only required for iOS users. As of iOS 10, developers must provide a reason for why the app wishes to access the device camera. Add this to the bottom of `config.xml`: - -```xml - - - Used to take pictures - -``` - -## Add Camera plugin to Angular App Module - -There’s one more step we need to do since this is an Angular project: register the Camera in the App Module (`src/app/app.module.ts`). First, import the Camera module: - -```Javascript -import { Camera } from '@awesome-cordova-plugins/camera'; -``` - -Then, add it as a Provider: - -```Javascript -providers: [ - StatusBar, - SplashScreen, - Camera, - {provide: ErrorHandler, useClass: IonicErrorHandler} - ], -``` - -It can now be used on any of our App pages. - -## Add the Camera to the About page - -Our camera button doesn’t do anything yet. Over in `about.html`, add a click handler to the button: - -```html - -``` - -Then, update the image placeholder. The following binds the “currentImage” variable (which we’ll work on next) to the image to display to the user. - -```html - -``` - -Open `about.ts` next and import the Camera library: - -```Javascript -import { Camera, CameraOptions } from '@awesome-cordova-plugins/camera'; -``` - -Next, define the “currentImage” variable and inject the Camera into this class via the constructor: - -```Javascript -export class AboutPage { - currentImage: any; - - constructor(public navCtrl: NavController, private camera: Camera) { -} -``` - -Finally, add the “takePicture” method, already wired up to execute once the camera button has been tapped: - -```Javascript -takePicture() { - const options: CameraOptions = { - quality: 100, - destinationType: this.camera.DestinationType.DATA_URL, - encodingType: this.camera.EncodingType.JPEG, - mediaType: this.camera.MediaType.PICTURE - } - - this.camera.getPicture(options).then((imageData) => { - this.currentImage = 'data:image/jpeg;base64,' + imageData; - }, (err) => { - // Handle error - console.log("Camera issue:" + err); - }); - } -``` - -Take notice: there’s no mention of iOS or Android! This is the awesome power of plugins: you use one API (`camera.getPicture()` in this case) and the plugin takes care of the platform differences for you. Write once, run everywhere `:)` - -Save this file then tap the Camera button in DevApp. Voila! The camera should open on your device. Once a photo has been taken, it displays on the Photo Gallery page. - -Finally, back up your changes to Appflow: - -```shell -git add . -git commit -m “added camera functionality” -git push ionic master -``` - -Next, we’ll look at how to transform the app into a photo gallery, as well as how to save the photos to your device! diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx deleted file mode 100644 index 30049b7017e..00000000000 --- a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx +++ /dev/null @@ -1,193 +0,0 @@ -# Realtime App Updates with Appflow Live Updates - -As you’ve seen so far, building web and mobile apps is quick and easy with the Ionic Framework. However, nothing disrupts rapid iteration faster than App Store delays. Fortunately, with Appflow’s Deploy feature, you can send live code changes directly to your users. Paired with seamless background updates, they are always upgraded to the latest version. - -Setting it up is quick and easy. For reference, continue to refer to [the part 3 folder](https://github.com/ionic-team/photo-gallery-tutorial-ionic3/tree/master/part3) on GitHub. First, install the Appflow JavaScript library: - -```shell -npm install @ionic/pro@latest --save -``` - -Then, add the Appflow plugin. Here’s the command to install it: - -```shell -$ ionic cordova plugin add cordova-plugin-ionic@latest --save ---variable APP_ID=YOUR_APP_ID --variable CHANNEL_NAME=YOUR_CHANNEL_NAME -``` - -There are two unique values to provide: your app id and channel name. Sign into Appflow, then find the App Id on your app’s dashboard: - -![The location of the App ID in the Appflow dashboard.](/img/guides/first-app-v3/app-id-location.png 'Appflow App ID Location') - -And we’ll just use “Master” as the channel name. Putting this together looks like: - -```shell -$ ionic cordova plugin add cordova-plugin-ionic@latest --save ---variable APP_ID=381533B9 --variable CHANNEL_NAME=Master -``` - -After this plugin has been added, you’ll notice that `config.xml` and `package.json` have been updated with your app’s details: - -```xml - - - - - - - - - -``` - -Next, modify `src/app/app.module.ts` to include the initialization of Appflow on app startup: - -```javascript -import { Pro } from '@ionic/pro'; - -Pro.init('YOUR_APP_ID', { - appVersion: 'APP_VERSION', -}); -``` - -As an example, this would look like: - -```javascript -Pro.init('381533B9', { - appVersion: '0.0.1', -}); -``` - -Next, push the code up to Appflow: - -```shell -git add . -git commit -m “adding Appflow” -git push ionic master -``` - -Next, create a local, native build of the app. - -## Android Builds - -Follow the [Android Setup instructions](../../../developing/android.mdx), which includes installing Java 8 and Android Studio on your machine. Then, in your Terminal run: - -```shell -ionic cordova build android --prod -``` - -This will generate a unsigned debug build (meaning the app can run on any Android device). - -## iOS Builds - -iOS is [a bit trickier to set up](../../../developing/ios.mdx) than Android and requires a Mac computer. Ensure XCode is updated to the latest version and set up a development team. Then, in your Terminal, run: - -```shell -ionic cordova build ios --prod -``` - -Then, continue to [follow the instructions here](../../../deployment/app-store.mdx) regarding signing certificates, etc. With a native version of your app built, let’s copy it to your device of choice. - -## Add the Native App to Your Local Device - -Now comes the fun part: testing out the native app on your device! For iOS, the easiest way (that works for both PC and Mac) involves using iTunes. Connect your iOS device, locate your IPA file, then drag and drop the IPA file from the file system onto your device in iTunes. The app will install immediately and be ready for use: - -
-
- -
-
- - -For Android testing, the easiest way across all OS platforms is to use [Android Studio](https://developer.android.com/studio/), Google’s official Android IDE. After downloading it, connect your Android device to your computer. On the Studio startup screen, select “Profile or debug APK”, then select the recently built APK file. - -In the upper right hand corner, click the Play button. Select your connected device, then click OK: - -
-
- -
-
- - -## Deploying Changes - -With Appflow Deploy, any JavaScript, HTML, or CSS changes can be pushed automatically to app users. Open the Photo Gallery app in your favorite code editor, then update the title of the Gallery page: - -```html - - - Photo Viewer - - -``` - -Next, push the code up to Appflow: - -```shell -$ git add . -$ git commit -m “change name to Photo Viewer” -$ git push ionic master -``` - -Log into the [Appflow dashboard](https://dashboard.ionicframework.com) and navigate to Deploy -> Builds. You’ll see this newest commit begin to build immediately. Since we assigned the Appflow plugin to the Master branch (the one we always Git Push to), the Channel label will also point to this commit, effectively auto-deploying this change to all app users: - -![The Deploy Builds section in the Appflow dashboard.](/img/guides/first-app-v3/deploy-channel.png 'Appflow Deploy Builds') - -A Channel points to a specific JavaScript Build or Snapshot of your app that will be shared with devices listening to that channel for updates. You can change which Build a Channel points to whenever you’d like. - -Each time a user launches our Photo Gallery app, it will poll for updates from Appflow. If new code is available, the update is downloaded in the background. There are [a handful of ways](https://ionic.io/docs/appflow/deploy/api#update_method) to control how updates are performed, but by default they will be applied the next time the user closes then opens the app. - -When the latest Build has been successful, close your local copy of Photo Gallery app or put it in the background for 30 seconds (the [MIN_BACKGROUND_DURATION default](https://ionic.io/docs/appflow/deploy/api#min_background_duration)), then reopen it. The title of the Photo Gallery page should change from “Photo Gallery” to “Photo Viewer.” - -What if you deploy a change, then realize that there is a bug? Or perhaps you’re just not happy with the name “Photo Viewer?” No problem: Appflow Deploy makes it easy to roll back changes as well! - -On the Deploy Builds page, click the “Assign to Channel” button on the previous commit, then click “Deploy.” App users will be reverted to the previous version, and our “Photo Gallery” name has been restored. - -![The Deploy Builds section in Appflow with a commit labeled 'set name to Photo Gallery' being assigned to the master channel for rollback.](/img/guides/first-app-v3/deploy-revertChange.png 'Appflow Deploy Revert Change') - -This was just a taste of what you can do with Appflow Live Updates! You can also set up multiple deployment channels to send targeted updates to specific groups of users. Use it to run A/B tests, or target the distribution of updates by audience, geography, or test group. - -## Stuck on creating local native builds? - -Building native app binaries for Android and iOS can be painful. The tooling isn’t great, new OS versions often result in challenging upgrades, and creating consistent builds across your dev team can be frustrating. Fortunately, Appflow’s Package feature makes this easy: simply upload your iOS certificate and Android keystore files, then we take care of the rest! - -[Start packaging your app in the cloud](https://dashboard.ionicframework.com/settings/billing) along with 10,000 Ionic Deploys per month. - -Up next, we look at Appflow Monitoring - track your app errors in realtime. diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/theming.mdx b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/theming.mdx deleted file mode 100644 index bc38fe59379..00000000000 --- a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/theming.mdx +++ /dev/null @@ -1,47 +0,0 @@ -# Make It Your Own! Ionic Theming - -Previously, we converted our single use Camera app into an epic photo gallery. Now, let’s explore how to make the photo gallery our own with Ionic theming. The visual design of the app is incredibly important - fortunately, Ionic provides a lot for us out-of-the-box. You can find the code for this in [the “part 3” folder](https://github.com/ionic-team/photo-gallery-tutorial-ionic3/tree/master/part3) on GitHub. - -Ionic has five default colors, defined as Sass variables, that can be used to change the color of its UI components: - -![Ionic's five default Sass color variables for theming: primary, secondary, danger, light, and dark.](/img/guides/first-app-v3/v3-theming.png 'Default Ionic Sass Variables') - -You can customize each color further by supplying a base and contract property. Base acts as the background color and contrast acts as the text color for most components. This provides much more flexible control over your styles: - -![Code snippet showing customized Sass variables with base and contrast properties.](/img/guides/first-app-v3/v3-themeColors.png 'Customized Ionic Sass Variables') - -You can find these colors defined in `src/theme/variables.scss`. - -By changing these variables here and there, you can easily update the entire theme of the application! Try changing a few of them and watch the app update in DevApp. For example, change the default blue color for Primary to purple: - -```Css -$colors: ( - primary: #7044ff, -) -``` - -But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to: - -![Comparing the native look of an Ionic app on iOS and Android platforms.](/img/guides/first-app-v3/ion-lab-comparison.png 'Ionic Platform Specific Styles Comparison') - -In our app, this is clearly visible in how the header and the icons are styled. - -If you want consistency, you can tell Ionic to use the same mode regardless of platform. For example, to apply Material Design (Android’s platform style), set it globally in the App Module class. Open `src/app/app.module.ts`, then set the `mode` property: - -```Javascript -imports: [ - BrowserModule, - IonicModule.forRoot(MyApp, { - mode: "md" - }, null), - IonicStorageModule.forRoot() - ], -``` - -Now, the iOS version of our app has a Material Design skin! - -![An Ionic app with Material Design styling applied on an iOS device.](/img/guides/first-app-v3/ion-lab-md-styling.png 'Ionic Material Design Styling on iOS') - -Creating gorgeous-looking Ionic apps is easy with Sass variables and platform-specific styling. You now have everything you need to get started with Ionic. Go forth and build great apps! - -If you're interested in taking your Ionic apps to the next level, continue on with our exploration of Appflow next. diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx deleted file mode 100644 index 0417b953de6..00000000000 --- a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx +++ /dev/null @@ -1,92 +0,0 @@ -# Track Bugs in Realtime with Ionic Monitoring - -Bugs happen, and can be hard to track down - especially with hundreds of possible combinations of mobile devices and operating systems. Appflow Monitoring allows you to track errors in your app on users’ phones and it sends them directly to you instantly, even if your code is minified! - -Reducing customer frustration by fixing major issues quickly in your production apps are a substantial part of providing a high quality app experience. Combined with Appflow Deploy, new updates can be rolled out quickly to address problems in real-time. - -To begin, let’s add a global error handler that will catch and report all unhandled exceptions that occur in the app. Open `src/app/app.module.ts`, then add two import statements: - -```javascript -import { ErrorHandler, Injectable, Injector } from '@angular/core'; -import { IonicErrorHandler } from 'ionic-angular'; -``` - -Next, create an error handler class calls the Monitoring service’s API whenever any errors have been encountered: - -```javascript -@Injectable() -export class MyErrorHandler implements ErrorHandler { - ionicErrorHandler: IonicErrorHandler; - - constructor(injector: Injector) { - try { - this.ionicErrorHandler = injector.get(IonicErrorHandler); - } catch (e) { - // Unable to get the IonicErrorHandler provider, ensure - // IonicErrorHandler has been added to the providers list below - } - } - - handleError(err: any): void { - Pro.monitoring.handleNewError(err); - - this.ionicErrorHandler && this.ionicErrorHandler.handleError(err); - } -} -``` - -Then, within the providers array, update IonicErrorHandler to MyErrorHandler: - -```javascript -{provide: ErrorHandler, useClass: MyErrorHandler}, -``` - -It should then look like: - -```javascript -providers: [ - // ... - IonicErrorHandler, - [{ provide: ErrorHandler, useClass: MyErrorHandler }], -]; -``` - -Next, let’s intentionally create a bug so we can demonstrate the power of Ionic Monitoring. Open `about.html` and rename the takePicture method to something that doesn’t exist, such as “takePhoto”: - -```html - -``` - -With this change in place, anytime a user taps on the Camera button, an exception will be thrown and sent to Ionic’s Monitoring service. - -Last, we need to need to create a Source Map for your app. This file makes it easy for Monitoring to pinpoint problems by providing stack traces that map back to the original, unminified TypeScript code. - -Sync the current version of the app by running the following: - -```shell -ionic monitoring syncmaps -``` - -With our intentional error in place, let’s try it out to see what happens. Run your app locally: - -```shell -ionic serve -``` - -Tap on the Gallery tab, then the camera button. A runtime error should occur. In a browser, head over to the [Appflow dashboard](https://dashboard.ionicframework.com), then Monitor -> Monitoring. After a few minutes, the error should appear: - -![An event showing error 'takePhoto is not a function' with status 'New'.](/img/guides/first-app-v3/monitoring-event.png 'Ionic Monitoring Event Overview') - -Clicking on the event gives us lots of details surrounding what happened, such as a full stack trace. In this instance, we see that the error occurred three times on Mac OS X in the Chrome web browser. - -![Detailed view of an event log displaying a TypeError stack trace and error details such as device, browser, and operating system.](/img/guides/first-app-v3/monitoring-details.png 'Detailed Ionic Monitoring Event Log') - -Given the proliferation of mobile devices and operating systems these days, this is immensely powerful. Armed with these details, we can hone in on the problem and fix it quickly. - -This is a TypeScript bug, meaning a fix can be released using Live Updates. Give it a try! - -- Revert the method back to “takePicture.” -- Push the fix using Git. Remember, “git push ionic master.” -- Roll out the fix using Live Updates from the Ionic dashboard. - -Supporting hundreds of mobile device types is so much easier with Appflow Monitoring. [Upgrade to the Appflow Developer plan today](https://dashboard.ionicframework.com/settings/billing) to get instant notification when bugs occur, save error history for sixty days (instead of seven), and unlock 10,000 live Deploy updates per month! diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx b/versioned_docs/version-v6/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx deleted file mode 100644 index 5e1d62fed1b..00000000000 --- a/versioned_docs/version-v6/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx +++ /dev/null @@ -1,202 +0,0 @@ -import DocsButton from '@components/page/native/DocsButton'; - -# Creating a Photo Gallery with Device Storage - -Last time, we successfully added the Camera plugin to the Tab2 page of our Tabs app. Currently, the photo is replaced each time a new one is taken. What if we wanted to display multiple photos together? Let’s create a photo gallery. You can follow along with the complete code for this [on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4). - -## Creating a Dedicated Photo Service - -From a terminal window, navigate to your Ionic project and run: - -```shell -ionic g service services/Photo -``` - -This creates a PhotoService class in a dedicated "services" folder: - -```Javascript -import { Injectable } from '@angular/core'; - -@Injectable({ - providedIn: 'root' -}) -export class PhotoService { - constructor() { } -} -``` - -Within this file, add a Photo class. The “data” property represents the base64 image data of a captured photo: - -```Javascript -class Photo { - data: any; -} -``` - -Then, create a Photos array to represent our photo gallery: - -```Javascript -export class PhotoService { - - public photos: Photo[] = []; - - constructor() { } -} -``` - -Back in `tab2.page.ts`, import PhotoService: - -```Javascript -import { PhotoService } from '../services/photo.service'; -``` - -Add it to the Constructor: - -```Javascript -constructor(private camera: Camera, public photoService: PhotoService) { } -``` - -Next, move all code pertaining to the Camera plugin to the PhotoService class. This includes the takePicture method, the Camera and CameraOptions imports, and the Tab2Page page constructor. - -Continuing on, we need to convert currentImage variable references to the new photos array. Start by adding the captured photo data into the photos array: - -```Javascript -this.camera.getPicture(options).then((imageData) => { - // Add new photo to gallery - this.photos.unshift({ - data: 'data:image/jpeg;base64,' + imageData - }); }, (err) => { - // Handle error - console.log("Camera issue: " + err); -}); -``` - -In `tab2.page.ts`, remove the currentImage variable and the reference to Camera in the constructor, leaving only PhotoService: - -```Javascript -export class Tab2Page { - constructor(public photoService: PhotoService) { } -} -``` - -Next, in `tab2.page.html`, remove the currentImage img tag. In its place, use an ion-grid component, which provides a great way to arrange elements on a page. In this case, we’ll use it to display 2 photos per row. - -```html - - - - - - - -``` - -Here, we loop through each photo in the PhotoServices photos array, adding a new column for each. Since an ion-row consists of 12 “blocks” of space, and we’re setting the size to 6 (`size="6"`), only 2 photos are displayed per row. - -Last, update the Fab button to call the PhotoService’s `takePicture` method: - -```Html - - - -``` - -Excellent! We now have a basic photo gallery working. - -## Saving photos to the device - -Having a working photo gallery is pretty cool, but you’ll likely notice that when the app is closed, the photos are lost forever. That’s no good, so let’s add the [Ionic Storage plugin](https://ionicframework.com/docs/storage/), as easy way to store key/value pairs and JSON objects. When running in a native app context, Storage will prioritize using SQLite, one of the most stable and widely used file-based databases. When running on the web or as a Progressive Web App, Storage will attempt to use IndexedDB, WebSQL, and localstorage, in that order. - -The Storage plugin works perfectly for our base64 image data. To begin, add the SQLite plugin for native: - -```shell -ionic cordova plugin add cordova-sqlite-storage -``` - -Next, add the JavaScript library for the web: - -```shell -npm install --save @ionic/storage -``` - -Last, import the Storage module and add it to the imports list in `app.module.ts`: - -```Javascript -import { IonicStorageModule } from '@ionic/storage'; - -@NgModule({ - declarations: [AppComponent], - entryComponents: [], - imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, - IonicStorageModule.forRoot() - ], - providers: [ - StatusBar, - SplashScreen, - Camera, - { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } - ], - bootstrap: [AppComponent] -}) -export class AppModule {} -``` - -It’s now ready to be used in our PhotoService class. Import it: - -```Javascript -import { Storage } from '@ionic/storage-angular'; -``` - -Then inject it via the constructor: - -```Javascript -constructor(private camera: Camera, private storage: Storage) { } -``` - -To add the capability to save photos, there’s only a couple steps left. Update the `takePicture()` method to save the entire photos array after each photo is taken using the storage.set method: - -```Javascript -this.camera.getPicture(options).then((imageData) => { - // Add new photo to gallery - this.photos.unshift({ - data: 'data:image/jpeg;base64,' + imageData - }); - - // Save all photos for later viewing - this.storage.set('photos', this.photos); -}, (err) => { - // Handle error - console.log("Camera issue: " + err); -}); -``` - -We still need to load the saved photos when the app is first opened. This is simple enough - retrieve the “photos” key then assign its value to the photos array: - -```Javascript -loadSaved() { - this.storage.get('photos').then((photos) => { - this.photos = photos || []; - }); -} -``` - -Over in the Tab2 page, call the loadSaved method once it begins loading: - -```Javascript -ngOnInit() { - this.photoService.loadSaved(); -} -``` - -Sweet! Photos are now saved to your device. To demonstrate that they are indeed being saved, force close DevApp, reopen it, and open the Tab2 page. Or, shake your device to have the Control Menu pop up, then tap “Exit preview.” Afterwards, reload this app to view the photos. - -Next up, we’ll look at how to apply a custom theme to an Ionic app. - -
- - Continue{' '} - - - - -
diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v4/intro.mdx b/versioned_docs/version-v6/developer-resources/guides/first-app-v4/intro.mdx deleted file mode 100644 index 7916776c975..00000000000 --- a/versioned_docs/version-v6/developer-resources/guides/first-app-v4/intro.mdx +++ /dev/null @@ -1,97 +0,0 @@ -# Your First Ionic App: Angular - -The great thing about Ionic is that with one codebase, you can build for any platform using familiar web tools and languages. Follow along as we create a working Photo Gallery. Here’s the before and after: - -![An Ionic app's transformation from a blank 'Tab Two' to a 'Photo Gallery' with images.](/img/guides/first-app-v3/gallery-combined.png 'Ionic App Before and After Photo Gallery') - -It’s easy to get started. Note that all code referenced in this guide can be [found on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4/). - -## Required Tools - -Download/install these right away to ensure an optimal Ionic development experience: - -- [Git](https://git-scm.com/downloads) for version control. -- SSH client, such as [PuTTy](https://putty.software/), for secure login to Appflow. -- Node.js for interacting with the Ionic ecosystem. [Download the LTS version here](https://nodejs.org/en/). -- A code editor for... writing code! We are fans of [Visual Studio Code](https://code.visualstudio.com/). -- Command-line terminal (CLI): FYI Windows users, for the best Ionic experience, we - recommend the built-in command line (cmd) or the Powershell CLI, running in Administrator mode. For - Mac/Linux - users, virtually any terminal will work. - -## Install Ionic and Cordova - -Run the following in the command line: - -```shell -npm install -g @ionic/cli cordova -``` - -:::note -The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur. - -Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../../../developing/tips.mdx#resolving-permission-errors) for more information. -::: - -## Create an App - -Next, create an Ionic Angular app using our “Tabs” app template: - -```shell -ionic start photo-gallery tabs -``` - -This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily! - -Next, change into the app folder: - -```shell -cd photo-gallery -``` - -That’s it! Now for the fun part - let’s see the app in action. - -## Run the App - -Run this command next: - -```shell -ionic serve -``` - -And voilà! Your Ionic app is now running in a web browser. Most of your app can be built right in the browser, greatly increasing development speed. - -## Photo Gallery!!! - -There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to add camera functionality. Let’s begin to transform this page into a Photo Gallery. Ionic features LiveReload, so when you make changes and save them, the app is updated immediately! - -![Animated GIF demonstrating the LiveReload feature in Ionic, showing real-time updates in the app after code changes.](/img/guides/first-app-v3/email-photogallery.gif 'Ionic LiveReload Feature Demonstration') - -Open the photo-gallery app folder in your favorite code editor of choice, then navigate to `/src/app/tab2/tab2.page.html`. We see: - -```html - - - Tab Two - - - - -``` - -`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title. We put our app code into `ion-content`. In this case, it’s where we’ll add a button that opens the device’s camera and shows the image captured by the camera. But first, let’s start with something obvious: renaming the Tab Two page: - -```html -Photo Gallery -``` - -Next, open `src/app/tabs/tabs.page.html`. Change the label to “Gallery” and the icon name to “images”: - -```html - - - Gallery - -``` - -That’s just the start of all the cool things we can do with Ionic. Up next, we’ll deploy the app to your iOS or Android device, then continue building the photo gallery. diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.mdx b/versioned_docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.mdx deleted file mode 100644 index d5c4dfcb129..00000000000 --- a/versioned_docs/version-v6/developer-resources/guides/first-app-v4/ios-android-camera.mdx +++ /dev/null @@ -1,154 +0,0 @@ -# Android, iOS, and the Camera - Oh My! - -Previously, we got an Ionic app up and running locally in a web browser. Now, let’s get it onto your iOS or Android device, then start building the photo gallery feature. - -## Add Cordova iOS and Android Platforms - -Ionic leverages the open source [Cordova project](https://cordova.apache.org/docs/en/latest/guide/overview/) to provide native hardware support. We begin by adding the iOS and Android _platforms_ then will add specific _plugins_ like the Camera afterwards: - -```shell -$ ionic cordova platform add ios -$ ionic cordova platform add android -``` - -These commands will create a `config.xml` file, which is used to define Cordova iOS and Android settings. Cordova reads this file and applies each setting as it builds each native app binary. - -There are more steps to configure [iOS](../../../developing/ios.mdx) and [Android](../../../developing/android.mdx) native tooling. - -Much better! Now we can add the camera functionality. By the way, you can find reference code for this [on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4). - -Back in `tab2.page.html`, add the following: - -```html - - - - - - - - - -``` - -Save the file and watch - a camera button appears! Tap on it and notice that it doesn’t do anything. Let’s fix that next. - -## Add the Camera Dependencies via the CLI - -In order to use the Camera, we need to bring in its JavaScript and native library dependencies. Back over in your Terminal window, run the following command, which adds the JavaScript library to the project, thus exposing the Camera API in TypeScript code: - -```shell -npm install @awesome-cordova-plugins/camera -``` - -In `package.json`, you’ll notice a new JavaScript dependency has been added, with a version number similar to the following: - -`"@awesome-cordova-plugins/camera": "^5.4.0"` - -Next, run this command to add the native iOS and Android code, effectively allowing the Camera to work on a mobile device. For more info on how this works, read up on [Cordova](https://cordova.apache.org/docs/en/latest/guide/overview/) and [Ionic Native](https://ionicframework.com/docs/native). - -```shell -ionic cordova plugin add cordova-plugin-camera -``` - -The `config.xml` file is now updated with an entry similar to the following for the native camera code: - -```xml - -``` - -The next step is only required for iOS users. As of iOS 10, developers must provide a reason for why the app wishes to access the device camera. Add this inside the ios platform section () of `config.xml`: - -```xml - - - Used to take pictures - -``` - -## Add Camera plugin to Angular App Module - -There’s one more step we need to do since this is an Angular project: register the Camera in the App Module (`src/app/app.module.ts`). First, import the Camera module: - -```Javascript -import { Camera } from '@awesome-cordova-plugins/camera/ngx'; -``` - -Then, add it as a Provider: - -```Javascript -providers: [ - StatusBar, - SplashScreen, - Camera, - {provide: ErrorHandler, useClass: IonicErrorHandler} - ], -``` - -It can now be used on any of our App pages. - -## Add the Camera to the Gallery page - -Our camera button doesn’t do anything yet. Over in `tab2.page.html`, add a click handler to the button: - -```html - - - - - -``` - -Then, update the image placeholder. The following binds the “currentImage” variable (which we’ll work on next) to the image to display to the user. - -```html - -``` - -Open `tab2.page.ts` next and import the Camera library: - -```Javascript -import { Camera, CameraOptions } from '@awesome-cordova-plugins/camera/ngx'; -``` - -Next, define the “currentImage” variable and inject the Camera into this class via the constructor: - -```Javascript -export class Tab2Page { - currentImage: any; - - constructor(private camera: Camera) { } -} -``` - -Finally, add the “takePicture” method in `tab2.page.ts`. It is already wired up to execute once the camera button has been tapped: - -```Javascript -export class Tab2Page { - currentImage: any; - - constructor(private camera: Camera) { } - - takePicture() { - const options: CameraOptions = { - quality: 100, - destinationType: this.camera.DestinationType.DATA_URL, - encodingType: this.camera.EncodingType.JPEG, - mediaType: this.camera.MediaType.PICTURE - }; - - this.camera.getPicture(options).then((imageData) => { - this.currentImage = 'data:image/jpeg;base64,' + imageData; - }, (err) => { - // Handle error - console.log("Camera issue:" + err); - }); - } -} -``` - -Take notice: there’s no mention of iOS or Android! This is the awesome power of plugins: you use one API (`camera.getPicture()` in this case) and the plugin takes care of the platform differences for you. Write once, run everywhere. 😀 - -Save this file then tap the Camera button in DevApp. Voila! The camera should open on your device. Once a photo has been taken, it displays on the Photo Gallery page. - -Next, we’ll look at how to transform the app into a photo gallery, as well as how to save the photos to your device! diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v4/theming.mdx b/versioned_docs/version-v6/developer-resources/guides/first-app-v4/theming.mdx deleted file mode 100644 index c55d591b308..00000000000 --- a/versioned_docs/version-v6/developer-resources/guides/first-app-v4/theming.mdx +++ /dev/null @@ -1,56 +0,0 @@ -# Make It Your Own! Ionic Theming - -Previously, we converted our single use Camera app into an epic photo gallery. Now, let’s explore how to make the photo gallery our own with Ionic theming. The visual design of the app is incredibly important - fortunately, Ionic provides a lot for us out-of-the-box. - -Ionic has nine default colors, defined as CSS variables, that can be used to change the color of its UI components: - -![A chart showing Ionic's nine default colors with their hex codes.](/img/guides/first-app-v4/theming-defaults.png 'Ionic Default Color Palette') - -You can customize each color further by supplying a base, contrast, shade, and tint properties. These provide flexible control over your styles: - -![Table detailing the properties for customizing the primary color in Ionic, including base, contrast, shade, and tint.](/img/guides/first-app-v4/theming-properties.png 'Ionic Color Customization Properties') - -You can find these colors defined in `src/theme/variables.scss`. - -By changing these variables here and there, you can easily update the entire theme of the application! Try changing a few of them and watch the app update in DevApp. For example, change the default blue color for Primary to purple: - -```css -/** Ionic CSS Variables **/ -:root { - /** primary **/ - --ion-color-primary: #b36bff; - --ion-color-primary-rgb: 179, 107, 255; - --ion-color-primary-contrast: #000000; - --ion-color-primary-contrast-rgb: 0, 0, 0; - --ion-color-primary-shade: #9e5ee0; - --ion-color-primary-tint: #bb7aff; -} -``` - -The easiest and most powerful way to create custom color palettes for your app’s UI is Ionic's [Color Generator tool](../../../theming/color-generator.mdx). As you change a color’s hex values, the embedded demo app automatically reflects the new colors. When you've finished making changes, simply copy and paste the generated code directly into your Ionic project. - -But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to: - -![Comparing the native look of an Ionic app on iOS and Android platforms.](/img/guides/first-app-v3/ion-lab-comparison.png 'Ionic Platform Specific Styles Comparison') - -In our app, this is clearly visible in how the header and the icons are styled. - -If you want consistency, you can tell Ionic to use the same mode regardless of platform. For example, to apply Material Design (Android’s platform style), set it globally in the App Module class. Open `src/app/app.module.ts`, then set the `mode` property: - -```Javascript -imports: [ - BrowserModule, - IonicModule.forRoot({ - mode: "md" - }), - IonicStorageModule.forRoot() - ], -``` - -Now, the iOS version of our app has a Material Design skin! - -![An Ionic app with Material Design styling applied on an iOS device.](/img/guides/first-app-v3/ion-lab-md-styling.png 'Ionic Material Design Styling on iOS') - -Creating gorgeous-looking Ionic apps is easy with CSS variables and platform-specific styling. You now have everything you need to get started with Ionic. - -Go forth and build great apps! diff --git a/versioned_docs/version-v6/developer-resources/posts.mdx b/versioned_docs/version-v6/developer-resources/posts.mdx deleted file mode 100644 index a8c5b3f861c..00000000000 --- a/versioned_docs/version-v6/developer-resources/posts.mdx +++ /dev/null @@ -1,77 +0,0 @@ ---- -sidebar_label: Posts ---- - -# Community Posts - -### [What's new in Ionic 5 - Migration and Free Starter](https://ionicthemes.com/tutorials/about/ionic5-tutorial-migration-and-starter) - -Take advantage of the new benefits from Ionic 5. In this guide we describe the main changes and show you how to migrate your applications from Ionic 4 to Ionic 5. For this post we created an Ionic 5 CRUD Contacts app that you can download for free to learn how to start using Ionic 5. - -### [Ionic Navigation and Angular Routing](https://ionicthemes.com/tutorials/about/ionic-navigation-and-routing-ultimate-guide) - -Learn how to master Routing and Navigation in Ionic Angular Apps as well as some usability tricks you can add to your apps to improve the user experience! - -### [Firebase Authentication Tutorial For Ionic Apps](https://ionicthemes.com/tutorials/about/firebase-authentication-in-ionic-framework-apps) - -Learn how to add Firebase Authentication to your Ionic 5 App. This tutorial explains step by step how to configure both the Firebase and the Ionic Apps to enable authentication with social providers such as Google, Facebook and Twitter and also with Email and Password. - -### [Native Cross Platform Web Apps with Ionic Capacitor](https://ionicthemes.com/tutorials/about/native-cross-platform-web-apps-with-ionic-capacitor) - -Ionic Capacitor introduction guide for beginners: history, motivation, usage and how to migrate your existing Cordova apps to Capacitor. - -### [Ionic Skeleton Loading Screens](https://ionicthemes.com/tutorials/about/improved-ux-for-ionic-apps-with-skeleton-loading-screens) - -UI Skeletons, Ghost Elements, Shell Elements? They are all the same! Think of them as cool content placeholders that are shown where the content will eventually be once it becomes available. In this guide you will learn the importance of adopting the App Shell pattern in your ionic apps and discuss how to implement it using Ionic and Angular. Also, we explain some advanced CSS techniques to take the UX to the next level. - -### [The Complete Guide To Progressive Web Apps with Ionic](https://ionicthemes.com/tutorials/about/the-complete-guide-to-progressive-web-apps-with-ionic4) - -Learn what Progressive Web Apps are, why you should consider them for your next project, and how easy is to build a complete and production ready PWA with Ionic. - -### [Mastering Web Components in Ionic](https://ionicthemes.com/tutorials/about/ionic-4-tutorial-mastering-web-components-in-ionic-4) - -Understanding the new component architecture in Ionic, including web components, shadow DOM, CSS 4 variables and Stencil. - -### [Forms and Validations in Ionic 5](https://ionicthemes.com/tutorials/about/forms-and-validation-in-ionic) - -Learn everything about Ionic Forms and input validations in Ionic Angular apps. - -### [Building a Ionic Firebase App step by step](https://ionicthemes.com/tutorials/about/building-a-ionic-firebase-app-step-by-step) - -Learn how to make a CRUD application using Ionic Framework, Cloud Firestore for the database, and Cloud Storage for image storage. - -### [Ionic and WordPress Integration using the WordPress REST API](https://ionicthemes.com/tutorials/about/ionic-wordpress-integration) - -Learn how to connect your Ionic app with your WordPress site using the WordPress REST API. - -### [Understanding Ionic 2: Imports](http://mcgivery.com/understanding-ionic-2-imports/) - -ES6/TS introduce a new way to bring in external code. Learn about Imports. - -### [Ionic 2 / Angular 2 Concepts](https://www.joshmorony.com/ionic-2-first-look-series-new-angular-2-concepts-syntax/) - -Familiarize yourself with some of the new concepts in Ionic 2 and Angular 2. - -### [Ionic, PouchDB, & SQLite For Storage](http://gonehybrid.com/how-to-use-pouchdb-sqlite-for-local-storage-in-ionic-2/) - -Simplify storage using PouchDB and Sqlite. - -### [Advanced Google Maps](https://www.joshmorony.com/creating-an-advanced-google-maps-component-in-ionic-2/) - -Go beyond adding a simple map to handling offline conditions and complex maps. - -### [Background Geolocation](https://www.joshmorony.com/adding-background-geolocation-to-an-ionic-2-application/) - -Learn how to add geolocation that can run in the background of your app. - -### [Taking Advantage of Observables](https://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html) - -Learn how to use observables in your Ionic 2 app. - -### [Using the Angular Router in ionic/angular 4](https://www.joshmorony.com/using-angular-routing-with-ionic-4/) - -Learn how to use the Angular Router in your `@ionic/angular` 4 app. - -### [Ionic 4 examples using Angular, Vue and React](https://ionicworkshop.com/posts/introduction-to-ionic-framework-angular-vue-react/) - -Learn how to use Ionic 4 with Angular, React and Vue. diff --git a/versioned_docs/version-v6/developer-resources/tools.mdx b/versioned_docs/version-v6/developer-resources/tools.mdx deleted file mode 100644 index aa1a7301ba9..00000000000 --- a/versioned_docs/version-v6/developer-resources/tools.mdx +++ /dev/null @@ -1,21 +0,0 @@ -# Tools - -### [Angular CLI](https://github.com/angular/angular-cli) - -Learn more about the power of the Angular CLI - -### [StackBlitz](https://stackblitz.com/) - -Quickly get started with a new Ionic app entirely in the browser! - -### [TypeScript](https://www.typescriptlang.org/) - -Check out the features that make working with TypeScript amazing. - -### [Glossary](../reference/glossary.mdx) - -A list of common terms you'll see while developing in Ionic. - -### [Starter Apps](https://ionicthemes.com) - -Ionic Starter Apps to speed up and improve your app development. diff --git a/versioned_docs/version-v6/developer-resources/videos.mdx b/versioned_docs/version-v6/developer-resources/videos.mdx deleted file mode 100644 index bdc0a784d25..00000000000 --- a/versioned_docs/version-v6/developer-resources/videos.mdx +++ /dev/null @@ -1,21 +0,0 @@ -# Videos - -### [Ionic 2 Crash Course](https://www.youtube.com/watch?v=O2WiI9QrS5s&feature=youtu.be) - -A quick introduction to Ionic 2 and how to build your first app. - -### [Ionic & Async](https://blog.ionicframework.com/screencast-ionic-async/) - -Learn how to coordinate multiple events in a timely manner. - -### [Building a TODO app in Ionic 2](http://www.joshmorony.com/build-a-todo-app-from-scratch-with-ionic-2-video-tutorial/) - -Learn how to build out an entire Ionic 2 app. - -### [Angular Connect: Ionic 2](https://www.youtube.com/watch?v=bAlydPwFONY) - -Dive into some of the ideas and goals behind Ionic 2. - -### [Ionic & Typings](https://blog.ionicframework.com/ionic-and-typings/) - -Learn how to add typings for libraries you are using in your Ionic 2 app. diff --git a/versioned_docs/version-v6/intro/first-app.mdx b/versioned_docs/version-v6/intro/first-app.mdx deleted file mode 100644 index 3fc9be2b1fd..00000000000 --- a/versioned_docs/version-v6/intro/first-app.mdx +++ /dev/null @@ -1,24 +0,0 @@ ---- -hide_table_of_contents: true ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsCards from '@components/global/DocsCards'; - -# Build Your First App Tutorial - -Pick the JavaScript framework you plan to use while building your Ionic app: - - - -

A complete guide to get you up to speed with the basics of building Ionic apps with Angular.

- - - -

A complete guide to get you up to speed with the basics of building Ionic apps with React.

- - - -

A complete guide to get you up to speed with the basics of building Ionic apps with Vue.

- - diff --git a/versioned_docs/version-v6/test/page1.mdx b/versioned_docs/version-v6/test/page1.mdx deleted file mode 100644 index cd5b72410d0..00000000000 --- a/versioned_docs/version-v6/test/page1.mdx +++ /dev/null @@ -1,3 +0,0 @@ -# Testing Page 1 - -This is Testing page 1, Get to Testing Page 2 [here](page2.mdx). diff --git a/versioned_docs/version-v6/test/page2.mdx b/versioned_docs/version-v6/test/page2.mdx deleted file mode 100644 index 5ebdef8dca0..00000000000 --- a/versioned_docs/version-v6/test/page2.mdx +++ /dev/null @@ -1,3 +0,0 @@ -# Testing Page 2 - -This is Testing page 2, Get to Testing Page 1 [here](page1.mdx). diff --git a/versioned_docs/version-v7/angular/your-first-app.mdx b/versioned_docs/version-v7/angular/your-first-app.mdx index 0865ab0a747..c7a8c5b8a4c 100644 --- a/versioned_docs/version-v7/angular/your-first-app.mdx +++ b/versioned_docs/version-v7/angular/your-first-app.mdx @@ -24,10 +24,6 @@ Here’s the finished app running on all 3 platforms: allowFullScreen > -:::note -Looking for the previous version of this guide that covered Ionic 4 and Cordova? [See here.](../developer-resources/guides/first-app-v4/intro.mdx) -::: - ## What We'll Build We'll create a Photo Gallery app that offers the ability to take photos with your device's camera, display them in a grid, and store them permanently on the device. diff --git a/versioned_docs/version-v7/developer-resources/courses.mdx b/versioned_docs/version-v7/developer-resources/courses.mdx deleted file mode 100644 index 568f0fc05a4..00000000000 --- a/versioned_docs/version-v7/developer-resources/courses.mdx +++ /dev/null @@ -1,107 +0,0 @@ -# Courses - -### [Elite Ionic](https://www.joshmorony.com/elite/) - -{/* cspell:disable-next-line */} - -by Josh Morony - -Elite Ionic is an online course for Ionic developers who want to move past the basics, and build complex, well tested, high performing, beautiful, and useable mobile applications. It is recommended that you already have a reasonably solid understanding of the basics of Ionic before starting this course. - -### [Ionic Academy](https://ionicacademy.com/) - -{/* cspell:disable-next-line */} - -by Simon Grimm - -Learn Ionic with step-by-step video courses & quick wins from one of the Ionic community leaders. Covers beginner, intermediate and advanced topics. Get access to a community of developers just like you. - -### [Ionic Framework: Tips, Tricks & Techniques](https://www.packtpub.com/mobile/ionic-framework-tips-tricks-and-techniques-video) - -{/* cspell:disable-next-line */} - -by Charles Muzonzini - -In this course, you will master tips and best practices for Ionic 4 & Ionic 5 that you can immediately implement to build high quality apps. This course covers a wide variety of topics from increasing app performance, to building custom native plugins, to securing your apps. It's a practical, hands-on course that will take your app building skills to the next level. - -### [Building Desktop Apps with Ionic and Electron](https://pluralsight.pxf.io/VeMXO) - -{/* cspell:disable-next-line */} - -by Michael Callaghan at Pluralsight - -Desktop development has historically required dramatically different skills than those required for web -development. The two disciplines don't mesh well. In this course, Building Desktop Apps with Ionic and Electron, -you will gain the ability to apply your hard-earned web development skills to build amazing desktop -applications. First, you will learn how to build a functional and attractive UI with Ionic and Angular. Next, -you will discover how to wrap that UI into an Electron application shell. Finally, you will explore how to -package your app and make it ready for distribution. When you are finished with this course, you will have the -skills and knowledge of Ionic and Electron development needed to deploy and distribute a beautiful app to both -Windows and macOS users. - -### [Building Progressive Web Apps with Ionic](https://pluralsight.pxf.io/Ly2EY) - -{/* cspell:disable-next-line */} - -by Michael Callaghan at Pluralsight - -Everything changed when Google created the concept of Progressive Web Applications or PWA. A PWA is a pure web -application that you can install on devices, that can function with limited network functionality, through its -use of intelligent caching. Build a Progressive Web App that will run anywhere. In this course, Building -Progressive Web Apps with Ionic, you will learn foundational knowledge and gain the ability to create a web -application that will run anywhere: the browser, desktop, or mobile clients. First, you will learn what a -Progressive Web App (or PWA) is. Next, you will discover how to use the Ionic Framework, Angular, and Firebase -to create, deploy, and optimize a basic web application into a full-blown PWA. Finally, you will explore how to -configure the application to make it installable and runnable on Androids and iPhones. When you’re finished with -this course, you will have the skills and knowledge of Ionic and PWAs needed to create and deploy your own -Progressive Web Application anywhere you desire. - -### [Ionic CLI](https://pluralsight.pxf.io/ionic-cli) - -{/* cspell:disable-next-line */} - -by Michael Callaghan at Pluralsight - -Since its inception, the Ionic Framework has included a rudimentary command line interface. Though only a few -years old, it has matured into a powerful tool that should be part of every developer’s toolbox. This course, -Ionic CLI, will start at the top and explore the Ionic CLI. First, you'll see how to create projects and -components. Next, you will learn how to build and serve apps. Finally, you'll discover how to share projects -with others, and even integrate with other build tools. Whether you’re just starting to explore Ionic, or have -been using it since its pre-beta days, there is something here for you. By the end of the course, you’ll have -the confidence to use the Ionic CLI as part of your everyday Ionic development. - -### [Wordpress Rest API and Ionic 4 (Angular) App With Auth](https://www.udemy.com/course/wordpress-rest-api-and-ionic-3-crud/) - -{/* cspell:disable-next-line */} - -by Baljeet Singh at Udemy - -### [Building Mobile Apps with Ionic 2, Angular 2, and TypeScript](https://app.pluralsight.com/library/courses/ionic2-angular2-typescript-mobile-apps/table-of-contents) - -{/* cspell:disable-next-line */} - -by Pluralsight - -### [Introducing Ionic 2](http://shop.oreilly.com/product/0636920050353.do) - -{/* cspell:disable-next-line */} - -by Mathieu Chauvinc - -### [Ionic 2 Master Course](https://www.udemy.com/ionic-2-tutorial/) - -{/* cspell:disable-next-line */} - -by Udemy - -### [Introducing Ionic 2](https://www.udemy.com/introducing-ionic-2/) - -{/* cspell:disable-next-line */} - -by Udemy - -### [Ionic 2 Solutions](https://www.packtpub.com/web-development/ionic-2-solutions-video) - -{/* cspell:disable-next-line */} - -by Hoc Phan diff --git a/versioned_docs/version-v7/developer-resources/guides.mdx b/versioned_docs/version-v7/developer-resources/guides.mdx deleted file mode 100644 index c0590b83684..00000000000 --- a/versioned_docs/version-v7/developer-resources/guides.mdx +++ /dev/null @@ -1,9 +0,0 @@ -# Guides - -### [Your First Ionic App - v3](guides/first-app-v3/intro.mdx) - -Follow along as we create a working Photo Gallery app using Ionic Framework v3 and Appflow. - -### [Your First Ionic 4 App - Angular and Cordova](guides/first-app-v4/intro.mdx) - -Follow along as we create a working Photo Gallery app using Ionic Framework v4 and Cordova. diff --git a/versioned_docs/version-v7/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx b/versioned_docs/version-v7/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx deleted file mode 100644 index 7887f03a320..00000000000 --- a/versioned_docs/version-v7/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx +++ /dev/null @@ -1,195 +0,0 @@ -# Creating a Photo Gallery with Device Storage - -Last time, we successfully added the Camera plugin to the About page of our Tabs app. Currently, the photo is replaced each time a new one is taken. What if we wanted to display multiple photos together? Let’s create a photo gallery. You can follow along with the complete code for this in [the part 2 folder](https://github.com/ionic-team/photo-gallery-tutorial-ionic3/tree/master/part2) on GitHub. - -## Creating a Dedicated Photo Service - -From a terminal window, navigate to your Ionic project and run: - -```shell -ionic g provider PhotoProvider -``` - -This creates a PhotoProvider class in a dedicated providers/photo folder: - -```Javascript -import { HttpClient } from '@angular/common/http'; -import { Injectable } from '@angular/core'; - -/* - Generated class for the PhotoProvider provider. - - See https://angular.io/guide/dependency-injection for more info on providers - and Angular DI. -*/ -@Injectable() -export class PhotoProvider { - - constructor(public http: HttpClient) { - console.log('Hello PhotoProvider Provider'); - } -} -``` - -Within this class, add a Photo class. The “data” property represents the base64 image data of a captured photo: - -```Javascript -class Photo { - data: any; -} -``` - -Then, create a Photos array to represent our photo gallery: - -```Javascript -export class PhotoProvider { - - public photos: Photo[] = []; - - constructor() { } -} -``` - -Back in `about.ts`, import PhotoProvider: - -```Javascript -import { PhotoProvider } from '../../providers/photo/photo'; -``` - -Add it to the Constructor: - -```Javascript -constructor(private camera: Camera, public photoService: PhotoProvider) { } -``` - -Next, move all code pertaining to the Camera plugin to the PhotoService class. This includes the takePicture method, the Camera import, and the About page constructor. Also, remove references to HttpClient - we won’t be making any HTTP calls. - -Continuing on, we need to convert currentImage variable references to the new photos array. Start by adding the captured photo data into the photos array: - -```Javascript -this.camera.getPicture(options).then((imageData) => { - // Add new photo to gallery - this.photos.unshift({ - data: 'data:image/jpeg;base64,' + imageData - }); }, (err) => { - // Handle error - console.log("Camera issue: " + err); -}); -``` - -In `about.page.ts`, remove the currentImage variable and the reference to Camera in the constructor, leaving only PhotoService: - -```Javascript -export class AboutPage { - constructor(public navCtrl: NavController, public photoService: PhotoProvider) { } -} -``` - -Next, in `about.page.html`, remove the currentImage img tag. In its place, use an ion-grid component, which provides a great way to arrange elements on a page. In this case, we’ll use it to display 2 photos per row. - -```html - - - - - - - -``` - -Here, we loop through each photo in the PhotoServices photos array, adding a new column for each. Since an ion-row consists of 12 “blocks” of space, and we’re setting the size to 6 (“col-6”), only 2 photos are displayed per row. - -Last, update the Fab button to call the PhotoProvider’s `takePicture` method: - -```Html - - - -``` - -Save the file and watch - a camera button appears! Tap on it and notice that it doesn’t do anything. Let’s fix that next. - -## Add the Camera Dependencies via the CLI - -In order to use the Camera, we need to bring in its JavaScript and native library dependencies. Back over in your Terminal window, run the following command, which adds the JavaScript library to the project, thus exposing the Camera API in TypeScript code: - -```shell -npm install --save @awesome-cordova-plugins/camera -``` - -In `package.json`, you’ll notice a new JavaScript dependency has been added: - -`"@awesome-cordova-plugins/camera": "^4.12.0"` - -Next, run this command to add the native iOS and Android code, effectively allowing the Camera to work on a mobile device: - -```shell -ionic cordova plugin add cordova-plugin-camera -``` - -In `config.xml`, a new plugin entry is created: - -```xml - -``` - -The next step is only required for iOS users. As of iOS 10, developers must provide a reason for why the app wishes to access the device camera. Add this to the bottom of `config.xml`: - -```xml - - - Used to take pictures - -``` - -## Add Camera plugin to Angular App Module - -There’s one more step we need to do since this is an Angular project: register the Camera in the App Module (`src/app/app.module.ts`). First, import the Camera module: - -```Javascript -import { Camera } from '@awesome-cordova-plugins/camera'; -``` - -Then, add it as a Provider: - -```Javascript -providers: [ - StatusBar, - SplashScreen, - Camera, - {provide: ErrorHandler, useClass: IonicErrorHandler} - ], -``` - -It can now be used on any of our App pages. - -## Add the Camera to the About page - -Our camera button doesn’t do anything yet. Over in `about.html`, add a click handler to the button: - -```html - -``` - -Then, update the image placeholder. The following binds the “currentImage” variable (which we’ll work on next) to the image to display to the user. - -```html - -``` - -Open `about.ts` next and import the Camera library: - -```Javascript -import { Camera, CameraOptions } from '@awesome-cordova-plugins/camera'; -``` - -Next, define the “currentImage” variable and inject the Camera into this class via the constructor: - -```Javascript -export class AboutPage { - currentImage: any; - - constructor(public navCtrl: NavController, private camera: Camera) { -} -``` - -Finally, add the “takePicture” method, already wired up to execute once the camera button has been tapped: - -```Javascript -takePicture() { - const options: CameraOptions = { - quality: 100, - destinationType: this.camera.DestinationType.DATA_URL, - encodingType: this.camera.EncodingType.JPEG, - mediaType: this.camera.MediaType.PICTURE - } - - this.camera.getPicture(options).then((imageData) => { - this.currentImage = 'data:image/jpeg;base64,' + imageData; - }, (err) => { - // Handle error - console.log("Camera issue:" + err); - }); - } -``` - -Take notice: there’s no mention of iOS or Android! This is the awesome power of plugins: you use one API (`camera.getPicture()` in this case) and the plugin takes care of the platform differences for you. Write once, run everywhere `:)` - -Save this file then tap the Camera button in DevApp. Voila! The camera should open on your device. Once a photo has been taken, it displays on the Photo Gallery page. - -Finally, back up your changes to Appflow: - -```shell -git add . -git commit -m “added camera functionality” -git push ionic master -``` - -Next, we’ll look at how to transform the app into a photo gallery, as well as how to save the photos to your device! diff --git a/versioned_docs/version-v7/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx b/versioned_docs/version-v7/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx deleted file mode 100644 index 11e25a0a1fa..00000000000 --- a/versioned_docs/version-v7/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx +++ /dev/null @@ -1,193 +0,0 @@ -# Realtime App Updates with Appflow Live Updates - -As you’ve seen so far, building web and mobile apps is quick and easy with the Ionic Framework. However, nothing disrupts rapid iteration faster than App Store delays. Fortunately, with Appflow’s Deploy feature, you can send live code changes directly to your users. Paired with seamless background updates, they are always upgraded to the latest version. - -Setting it up is quick and easy. For reference, continue to refer to [the part 3 folder](https://github.com/ionic-team/photo-gallery-tutorial-ionic3/tree/master/part3) on GitHub. First, install the Appflow JavaScript library: - -```shell -npm install @ionic/pro@latest --save -``` - -Then, add the Appflow plugin. Here’s the command to install it: - -```shell -$ ionic cordova plugin add cordova-plugin-ionic@latest --save ---variable APP_ID=YOUR_APP_ID --variable CHANNEL_NAME=YOUR_CHANNEL_NAME -``` - -There are two unique values to provide: your app id and channel name. Sign into Appflow, then find the App Id on your app’s dashboard: - -![The location of the App ID in the Appflow dashboard.](/img/guides/first-app-v3/app-id-location.png 'Appflow App ID Location') - -And we’ll just use “Master” as the channel name. Putting this together looks like: - -```shell -$ ionic cordova plugin add cordova-plugin-ionic@latest --save ---variable APP_ID=381533B9 --variable CHANNEL_NAME=Master -``` - -After this plugin has been added, you’ll notice that `config.xml` and `package.json` have been updated with your app’s details: - -```xml - - - - - - - - - -``` - -Next, modify `src/app/app.module.ts` to include the initialization of Appflow on app startup: - -```javascript -import { Pro } from '@ionic/pro'; - -Pro.init('YOUR_APP_ID', { - appVersion: 'APP_VERSION', -}); -``` - -As an example, this would look like: - -```javascript -Pro.init('381533B9', { - appVersion: '0.0.1', -}); -``` - -Next, push the code up to Appflow: - -```shell -git add . -git commit -m “adding Appflow” -git push ionic master -``` - -Next, create a local, native build of the app. - -## Android Builds - -Follow the [Android Setup instructions](../../../developing/android.mdx), which includes installing Java 8 and Android Studio on your machine. Then, in your Terminal run: - -```shell -ionic cordova build android --prod -``` - -This will generate a unsigned debug build (meaning the app can run on any Android device). - -## iOS Builds - -iOS is [a bit trickier to set up](../../../developing/ios.mdx) than Android and requires a Mac computer. Ensure XCode is updated to the latest version and set up a development team. Then, in your Terminal, run: - -```shell -ionic cordova build ios --prod -``` - -Then, continue to [follow the instructions here](../../../deployment/app-store.mdx) regarding signing certificates, etc. With a native version of your app built, let’s copy it to your device of choice. - -## Add the Native App to Your Local Device - -Now comes the fun part: testing out the native app on your device! For iOS, the easiest way (that works for both PC and Mac) involves using iTunes. Connect your iOS device, locate your IPA file, then drag and drop the IPA file from the file system onto your device in iTunes. The app will install immediately and be ready for use: - -
-
- -
-
- - -For Android testing, the easiest way across all OS platforms is to use [Android Studio](https://developer.android.com/studio/), Google’s official Android IDE. After downloading it, connect your Android device to your computer. On the Studio startup screen, select “Profile or debug APK”, then select the recently built APK file. - -In the upper right hand corner, click the Play button. Select your connected device, then click OK: - -
-
- -
-
- - -## Deploying Changes - -With Appflow Deploy, any JavaScript, HTML, or CSS changes can be pushed automatically to app users. Open the Photo Gallery app in your favorite code editor, then update the title of the Gallery page: - -```html - - - Photo Viewer - - -``` - -Next, push the code up to Appflow: - -```shell -$ git add . -$ git commit -m “change name to Photo Viewer” -$ git push ionic master -``` - -Log into the [Appflow dashboard](https://dashboard.ionicframework.com) and navigate to Deploy -> Builds. You’ll see this newest commit begin to build immediately. Since we assigned the Appflow plugin to the Master branch (the one we always Git Push to), the Channel label will also point to this commit, effectively auto-deploying this change to all app users: - -![The Deploy Builds section in the Appflow dashboard.](/img/guides/first-app-v3/deploy-channel.png 'Appflow Deploy Builds') - -A Channel points to a specific JavaScript Build or Snapshot of your app that will be shared with devices listening to that channel for updates. You can change which Build a Channel points to whenever you’d like. - -Each time a user launches our Photo Gallery app, it will poll for updates from Appflow. If new code is available, the update is downloaded in the background. There are [a handful of ways](https://ionic.io/docs/appflow/deploy/api#update_method) to control how updates are performed, but by default they will be applied the next time the user closes then opens the app. - -When the latest Build has been successful, close your local copy of Photo Gallery app or put it in the background for 30 seconds (the [MIN_BACKGROUND_DURATION default](https://ionic.io/docs/appflow/deploy/api#min_background_duration)), then reopen it. The title of the Photo Gallery page should change from “Photo Gallery” to “Photo Viewer.” - -What if you deploy a change, then realize that there is a bug? Or perhaps you’re just not happy with the name “Photo Viewer?” No problem: Appflow Deploy makes it easy to roll back changes as well! - -On the Deploy Builds page, click the “Assign to Channel” button on the previous commit, then click “Deploy.” App users will be reverted to the previous version, and our “Photo Gallery” name has been restored. - -![The Deploy Builds section in Appflow with a commit labeled 'set name to Photo Gallery' being assigned to the master channel for rollback.](/img/guides/first-app-v3/deploy-revertChange.png 'Appflow Deploy Revert Change') - -This was just a taste of what you can do with Appflow Live Updates! You can also set up multiple deployment channels to send targeted updates to specific groups of users. Use it to run A/B tests, or target the distribution of updates by audience, geography, or test group. - -## Stuck on creating local native builds? - -Building native app binaries for Android and iOS can be painful. The tooling isn’t great, new OS versions often result in challenging upgrades, and creating consistent builds across your dev team can be frustrating. Fortunately, Appflow’s Package feature makes this easy: simply upload your iOS certificate and Android keystore files, then we take care of the rest! - -[Start packaging your app in the cloud](https://dashboard.ionicframework.com/settings/billing) along with 10,000 Ionic Deploys per month. - -Up next, we look at Appflow Monitoring - track your app errors in realtime. diff --git a/versioned_docs/version-v7/developer-resources/guides/first-app-v3/theming.mdx b/versioned_docs/version-v7/developer-resources/guides/first-app-v3/theming.mdx deleted file mode 100644 index bc38fe59379..00000000000 --- a/versioned_docs/version-v7/developer-resources/guides/first-app-v3/theming.mdx +++ /dev/null @@ -1,47 +0,0 @@ -# Make It Your Own! Ionic Theming - -Previously, we converted our single use Camera app into an epic photo gallery. Now, let’s explore how to make the photo gallery our own with Ionic theming. The visual design of the app is incredibly important - fortunately, Ionic provides a lot for us out-of-the-box. You can find the code for this in [the “part 3” folder](https://github.com/ionic-team/photo-gallery-tutorial-ionic3/tree/master/part3) on GitHub. - -Ionic has five default colors, defined as Sass variables, that can be used to change the color of its UI components: - -![Ionic's five default Sass color variables for theming: primary, secondary, danger, light, and dark.](/img/guides/first-app-v3/v3-theming.png 'Default Ionic Sass Variables') - -You can customize each color further by supplying a base and contract property. Base acts as the background color and contrast acts as the text color for most components. This provides much more flexible control over your styles: - -![Code snippet showing customized Sass variables with base and contrast properties.](/img/guides/first-app-v3/v3-themeColors.png 'Customized Ionic Sass Variables') - -You can find these colors defined in `src/theme/variables.scss`. - -By changing these variables here and there, you can easily update the entire theme of the application! Try changing a few of them and watch the app update in DevApp. For example, change the default blue color for Primary to purple: - -```Css -$colors: ( - primary: #7044ff, -) -``` - -But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to: - -![Comparing the native look of an Ionic app on iOS and Android platforms.](/img/guides/first-app-v3/ion-lab-comparison.png 'Ionic Platform Specific Styles Comparison') - -In our app, this is clearly visible in how the header and the icons are styled. - -If you want consistency, you can tell Ionic to use the same mode regardless of platform. For example, to apply Material Design (Android’s platform style), set it globally in the App Module class. Open `src/app/app.module.ts`, then set the `mode` property: - -```Javascript -imports: [ - BrowserModule, - IonicModule.forRoot(MyApp, { - mode: "md" - }, null), - IonicStorageModule.forRoot() - ], -``` - -Now, the iOS version of our app has a Material Design skin! - -![An Ionic app with Material Design styling applied on an iOS device.](/img/guides/first-app-v3/ion-lab-md-styling.png 'Ionic Material Design Styling on iOS') - -Creating gorgeous-looking Ionic apps is easy with Sass variables and platform-specific styling. You now have everything you need to get started with Ionic. Go forth and build great apps! - -If you're interested in taking your Ionic apps to the next level, continue on with our exploration of Appflow next. diff --git a/versioned_docs/version-v7/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx b/versioned_docs/version-v7/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx deleted file mode 100644 index 0417b953de6..00000000000 --- a/versioned_docs/version-v7/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx +++ /dev/null @@ -1,92 +0,0 @@ -# Track Bugs in Realtime with Ionic Monitoring - -Bugs happen, and can be hard to track down - especially with hundreds of possible combinations of mobile devices and operating systems. Appflow Monitoring allows you to track errors in your app on users’ phones and it sends them directly to you instantly, even if your code is minified! - -Reducing customer frustration by fixing major issues quickly in your production apps are a substantial part of providing a high quality app experience. Combined with Appflow Deploy, new updates can be rolled out quickly to address problems in real-time. - -To begin, let’s add a global error handler that will catch and report all unhandled exceptions that occur in the app. Open `src/app/app.module.ts`, then add two import statements: - -```javascript -import { ErrorHandler, Injectable, Injector } from '@angular/core'; -import { IonicErrorHandler } from 'ionic-angular'; -``` - -Next, create an error handler class calls the Monitoring service’s API whenever any errors have been encountered: - -```javascript -@Injectable() -export class MyErrorHandler implements ErrorHandler { - ionicErrorHandler: IonicErrorHandler; - - constructor(injector: Injector) { - try { - this.ionicErrorHandler = injector.get(IonicErrorHandler); - } catch (e) { - // Unable to get the IonicErrorHandler provider, ensure - // IonicErrorHandler has been added to the providers list below - } - } - - handleError(err: any): void { - Pro.monitoring.handleNewError(err); - - this.ionicErrorHandler && this.ionicErrorHandler.handleError(err); - } -} -``` - -Then, within the providers array, update IonicErrorHandler to MyErrorHandler: - -```javascript -{provide: ErrorHandler, useClass: MyErrorHandler}, -``` - -It should then look like: - -```javascript -providers: [ - // ... - IonicErrorHandler, - [{ provide: ErrorHandler, useClass: MyErrorHandler }], -]; -``` - -Next, let’s intentionally create a bug so we can demonstrate the power of Ionic Monitoring. Open `about.html` and rename the takePicture method to something that doesn’t exist, such as “takePhoto”: - -```html - -``` - -With this change in place, anytime a user taps on the Camera button, an exception will be thrown and sent to Ionic’s Monitoring service. - -Last, we need to need to create a Source Map for your app. This file makes it easy for Monitoring to pinpoint problems by providing stack traces that map back to the original, unminified TypeScript code. - -Sync the current version of the app by running the following: - -```shell -ionic monitoring syncmaps -``` - -With our intentional error in place, let’s try it out to see what happens. Run your app locally: - -```shell -ionic serve -``` - -Tap on the Gallery tab, then the camera button. A runtime error should occur. In a browser, head over to the [Appflow dashboard](https://dashboard.ionicframework.com), then Monitor -> Monitoring. After a few minutes, the error should appear: - -![An event showing error 'takePhoto is not a function' with status 'New'.](/img/guides/first-app-v3/monitoring-event.png 'Ionic Monitoring Event Overview') - -Clicking on the event gives us lots of details surrounding what happened, such as a full stack trace. In this instance, we see that the error occurred three times on Mac OS X in the Chrome web browser. - -![Detailed view of an event log displaying a TypeError stack trace and error details such as device, browser, and operating system.](/img/guides/first-app-v3/monitoring-details.png 'Detailed Ionic Monitoring Event Log') - -Given the proliferation of mobile devices and operating systems these days, this is immensely powerful. Armed with these details, we can hone in on the problem and fix it quickly. - -This is a TypeScript bug, meaning a fix can be released using Live Updates. Give it a try! - -- Revert the method back to “takePicture.” -- Push the fix using Git. Remember, “git push ionic master.” -- Roll out the fix using Live Updates from the Ionic dashboard. - -Supporting hundreds of mobile device types is so much easier with Appflow Monitoring. [Upgrade to the Appflow Developer plan today](https://dashboard.ionicframework.com/settings/billing) to get instant notification when bugs occur, save error history for sixty days (instead of seven), and unlock 10,000 live Deploy updates per month! diff --git a/versioned_docs/version-v7/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx b/versioned_docs/version-v7/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx deleted file mode 100644 index 5e1d62fed1b..00000000000 --- a/versioned_docs/version-v7/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx +++ /dev/null @@ -1,202 +0,0 @@ -import DocsButton from '@components/page/native/DocsButton'; - -# Creating a Photo Gallery with Device Storage - -Last time, we successfully added the Camera plugin to the Tab2 page of our Tabs app. Currently, the photo is replaced each time a new one is taken. What if we wanted to display multiple photos together? Let’s create a photo gallery. You can follow along with the complete code for this [on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4). - -## Creating a Dedicated Photo Service - -From a terminal window, navigate to your Ionic project and run: - -```shell -ionic g service services/Photo -``` - -This creates a PhotoService class in a dedicated "services" folder: - -```Javascript -import { Injectable } from '@angular/core'; - -@Injectable({ - providedIn: 'root' -}) -export class PhotoService { - constructor() { } -} -``` - -Within this file, add a Photo class. The “data” property represents the base64 image data of a captured photo: - -```Javascript -class Photo { - data: any; -} -``` - -Then, create a Photos array to represent our photo gallery: - -```Javascript -export class PhotoService { - - public photos: Photo[] = []; - - constructor() { } -} -``` - -Back in `tab2.page.ts`, import PhotoService: - -```Javascript -import { PhotoService } from '../services/photo.service'; -``` - -Add it to the Constructor: - -```Javascript -constructor(private camera: Camera, public photoService: PhotoService) { } -``` - -Next, move all code pertaining to the Camera plugin to the PhotoService class. This includes the takePicture method, the Camera and CameraOptions imports, and the Tab2Page page constructor. - -Continuing on, we need to convert currentImage variable references to the new photos array. Start by adding the captured photo data into the photos array: - -```Javascript -this.camera.getPicture(options).then((imageData) => { - // Add new photo to gallery - this.photos.unshift({ - data: 'data:image/jpeg;base64,' + imageData - }); }, (err) => { - // Handle error - console.log("Camera issue: " + err); -}); -``` - -In `tab2.page.ts`, remove the currentImage variable and the reference to Camera in the constructor, leaving only PhotoService: - -```Javascript -export class Tab2Page { - constructor(public photoService: PhotoService) { } -} -``` - -Next, in `tab2.page.html`, remove the currentImage img tag. In its place, use an ion-grid component, which provides a great way to arrange elements on a page. In this case, we’ll use it to display 2 photos per row. - -```html - - - - - - - -``` - -Here, we loop through each photo in the PhotoServices photos array, adding a new column for each. Since an ion-row consists of 12 “blocks” of space, and we’re setting the size to 6 (`size="6"`), only 2 photos are displayed per row. - -Last, update the Fab button to call the PhotoService’s `takePicture` method: - -```Html - - - -``` - -Excellent! We now have a basic photo gallery working. - -## Saving photos to the device - -Having a working photo gallery is pretty cool, but you’ll likely notice that when the app is closed, the photos are lost forever. That’s no good, so let’s add the [Ionic Storage plugin](https://ionicframework.com/docs/storage/), as easy way to store key/value pairs and JSON objects. When running in a native app context, Storage will prioritize using SQLite, one of the most stable and widely used file-based databases. When running on the web or as a Progressive Web App, Storage will attempt to use IndexedDB, WebSQL, and localstorage, in that order. - -The Storage plugin works perfectly for our base64 image data. To begin, add the SQLite plugin for native: - -```shell -ionic cordova plugin add cordova-sqlite-storage -``` - -Next, add the JavaScript library for the web: - -```shell -npm install --save @ionic/storage -``` - -Last, import the Storage module and add it to the imports list in `app.module.ts`: - -```Javascript -import { IonicStorageModule } from '@ionic/storage'; - -@NgModule({ - declarations: [AppComponent], - entryComponents: [], - imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, - IonicStorageModule.forRoot() - ], - providers: [ - StatusBar, - SplashScreen, - Camera, - { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } - ], - bootstrap: [AppComponent] -}) -export class AppModule {} -``` - -It’s now ready to be used in our PhotoService class. Import it: - -```Javascript -import { Storage } from '@ionic/storage-angular'; -``` - -Then inject it via the constructor: - -```Javascript -constructor(private camera: Camera, private storage: Storage) { } -``` - -To add the capability to save photos, there’s only a couple steps left. Update the `takePicture()` method to save the entire photos array after each photo is taken using the storage.set method: - -```Javascript -this.camera.getPicture(options).then((imageData) => { - // Add new photo to gallery - this.photos.unshift({ - data: 'data:image/jpeg;base64,' + imageData - }); - - // Save all photos for later viewing - this.storage.set('photos', this.photos); -}, (err) => { - // Handle error - console.log("Camera issue: " + err); -}); -``` - -We still need to load the saved photos when the app is first opened. This is simple enough - retrieve the “photos” key then assign its value to the photos array: - -```Javascript -loadSaved() { - this.storage.get('photos').then((photos) => { - this.photos = photos || []; - }); -} -``` - -Over in the Tab2 page, call the loadSaved method once it begins loading: - -```Javascript -ngOnInit() { - this.photoService.loadSaved(); -} -``` - -Sweet! Photos are now saved to your device. To demonstrate that they are indeed being saved, force close DevApp, reopen it, and open the Tab2 page. Or, shake your device to have the Control Menu pop up, then tap “Exit preview.” Afterwards, reload this app to view the photos. - -Next up, we’ll look at how to apply a custom theme to an Ionic app. - -
- - Continue{' '} - - - - -
diff --git a/versioned_docs/version-v7/developer-resources/guides/first-app-v4/intro.mdx b/versioned_docs/version-v7/developer-resources/guides/first-app-v4/intro.mdx deleted file mode 100644 index 00e9e11ad2c..00000000000 --- a/versioned_docs/version-v7/developer-resources/guides/first-app-v4/intro.mdx +++ /dev/null @@ -1,97 +0,0 @@ -# Your First Ionic App: Angular - -The great thing about Ionic is that with one codebase, you can build for any platform using familiar web tools and languages. Follow along as we create a working Photo Gallery. Here’s the before and after: - -![An Ionic app's transformation from a blank 'Tab Two' to a 'Photo Gallery' with images.](/img/guides/first-app-v3/gallery-combined.png 'Ionic App Before and After Photo Gallery') - -It’s easy to get started. Note that all code referenced in this guide can be [found on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4/). - -## Required Tools - -Download/install these right away to ensure an optimal Ionic development experience: - -- [Git](https://git-scm.com/downloads) for version control. -- SSH client, such as [PuTTy](https://putty.software/), for secure login to Appflow. -- Node.js for interacting with the Ionic ecosystem. [Download the LTS version here](https://nodejs.org/en/). -- A code editor for... writing code! We are fans of [Visual Studio Code](https://code.visualstudio.com/). -- Command-line terminal (CLI): FYI Windows users, for the best Ionic experience, we - recommend the built-in command line (cmd) or the Powershell CLI, running in Administrator mode. For - Mac/Linux - users, virtually any terminal will work. - -## Install Ionic and Cordova - -Run the following in the command line: - -```shell -npm install -g @ionic/cli cordova -``` - -:::note -The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur. - -Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../../../developing/tips.mdx#resolving-permission-errors) for more information. -::: - -## Create an App - -Next, create an Ionic Angular app using our “Tabs” app template: - -```shell -ionic start photo-gallery tabs -``` - -This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily! - -Next, change into the app folder: - -```shell -cd photo-gallery -``` - -That’s it! Now for the fun part - let’s see the app in action. - -## Run the App - -Run this command next: - -```shell -ionic serve -``` - -And voilà! Your Ionic app is now running in a web browser. Most of your app can be built right in the browser, greatly increasing development speed. - -## Photo Gallery!!! - -There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to add camera functionality. Let’s begin to transform this page into a Photo Gallery. Ionic features LiveReload, so when you make changes and save them, the app is updated immediately! - -![Animated GIF demonstrating the LiveReload feature in Ionic as changes are made to the app.](/img/guides/first-app-v3/email-photogallery.gif 'Ionic LiveReload Feature Demonstration') - -Open the photo-gallery app folder in your favorite code editor of choice, then navigate to `/src/app/tab2/tab2.page.html`. We see: - -```html - - - Tab Two - - - - -``` - -`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title. We put our app code into `ion-content`. In this case, it’s where we’ll add a button that opens the device’s camera and shows the image captured by the camera. But first, let’s start with something obvious: renaming the Tab Two page: - -```html -Photo Gallery -``` - -Next, open `src/app/tabs/tabs.page.html`. Change the label to “Gallery” and the icon name to “images”: - -```html - - - Gallery - -``` - -That’s just the start of all the cool things we can do with Ionic. Up next, we’ll deploy the app to your iOS or Android device, then continue building the photo gallery. diff --git a/versioned_docs/version-v7/developer-resources/guides/first-app-v4/ios-android-camera.mdx b/versioned_docs/version-v7/developer-resources/guides/first-app-v4/ios-android-camera.mdx deleted file mode 100644 index d5c4dfcb129..00000000000 --- a/versioned_docs/version-v7/developer-resources/guides/first-app-v4/ios-android-camera.mdx +++ /dev/null @@ -1,154 +0,0 @@ -# Android, iOS, and the Camera - Oh My! - -Previously, we got an Ionic app up and running locally in a web browser. Now, let’s get it onto your iOS or Android device, then start building the photo gallery feature. - -## Add Cordova iOS and Android Platforms - -Ionic leverages the open source [Cordova project](https://cordova.apache.org/docs/en/latest/guide/overview/) to provide native hardware support. We begin by adding the iOS and Android _platforms_ then will add specific _plugins_ like the Camera afterwards: - -```shell -$ ionic cordova platform add ios -$ ionic cordova platform add android -``` - -These commands will create a `config.xml` file, which is used to define Cordova iOS and Android settings. Cordova reads this file and applies each setting as it builds each native app binary. - -There are more steps to configure [iOS](../../../developing/ios.mdx) and [Android](../../../developing/android.mdx) native tooling. - -Much better! Now we can add the camera functionality. By the way, you can find reference code for this [on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4). - -Back in `tab2.page.html`, add the following: - -```html - - - - - - - - - -``` - -Save the file and watch - a camera button appears! Tap on it and notice that it doesn’t do anything. Let’s fix that next. - -## Add the Camera Dependencies via the CLI - -In order to use the Camera, we need to bring in its JavaScript and native library dependencies. Back over in your Terminal window, run the following command, which adds the JavaScript library to the project, thus exposing the Camera API in TypeScript code: - -```shell -npm install @awesome-cordova-plugins/camera -``` - -In `package.json`, you’ll notice a new JavaScript dependency has been added, with a version number similar to the following: - -`"@awesome-cordova-plugins/camera": "^5.4.0"` - -Next, run this command to add the native iOS and Android code, effectively allowing the Camera to work on a mobile device. For more info on how this works, read up on [Cordova](https://cordova.apache.org/docs/en/latest/guide/overview/) and [Ionic Native](https://ionicframework.com/docs/native). - -```shell -ionic cordova plugin add cordova-plugin-camera -``` - -The `config.xml` file is now updated with an entry similar to the following for the native camera code: - -```xml - -``` - -The next step is only required for iOS users. As of iOS 10, developers must provide a reason for why the app wishes to access the device camera. Add this inside the ios platform section () of `config.xml`: - -```xml - - - Used to take pictures - -``` - -## Add Camera plugin to Angular App Module - -There’s one more step we need to do since this is an Angular project: register the Camera in the App Module (`src/app/app.module.ts`). First, import the Camera module: - -```Javascript -import { Camera } from '@awesome-cordova-plugins/camera/ngx'; -``` - -Then, add it as a Provider: - -```Javascript -providers: [ - StatusBar, - SplashScreen, - Camera, - {provide: ErrorHandler, useClass: IonicErrorHandler} - ], -``` - -It can now be used on any of our App pages. - -## Add the Camera to the Gallery page - -Our camera button doesn’t do anything yet. Over in `tab2.page.html`, add a click handler to the button: - -```html - - - - - -``` - -Then, update the image placeholder. The following binds the “currentImage” variable (which we’ll work on next) to the image to display to the user. - -```html - -``` - -Open `tab2.page.ts` next and import the Camera library: - -```Javascript -import { Camera, CameraOptions } from '@awesome-cordova-plugins/camera/ngx'; -``` - -Next, define the “currentImage” variable and inject the Camera into this class via the constructor: - -```Javascript -export class Tab2Page { - currentImage: any; - - constructor(private camera: Camera) { } -} -``` - -Finally, add the “takePicture” method in `tab2.page.ts`. It is already wired up to execute once the camera button has been tapped: - -```Javascript -export class Tab2Page { - currentImage: any; - - constructor(private camera: Camera) { } - - takePicture() { - const options: CameraOptions = { - quality: 100, - destinationType: this.camera.DestinationType.DATA_URL, - encodingType: this.camera.EncodingType.JPEG, - mediaType: this.camera.MediaType.PICTURE - }; - - this.camera.getPicture(options).then((imageData) => { - this.currentImage = 'data:image/jpeg;base64,' + imageData; - }, (err) => { - // Handle error - console.log("Camera issue:" + err); - }); - } -} -``` - -Take notice: there’s no mention of iOS or Android! This is the awesome power of plugins: you use one API (`camera.getPicture()` in this case) and the plugin takes care of the platform differences for you. Write once, run everywhere. 😀 - -Save this file then tap the Camera button in DevApp. Voila! The camera should open on your device. Once a photo has been taken, it displays on the Photo Gallery page. - -Next, we’ll look at how to transform the app into a photo gallery, as well as how to save the photos to your device! diff --git a/versioned_docs/version-v7/developer-resources/guides/first-app-v4/theming.mdx b/versioned_docs/version-v7/developer-resources/guides/first-app-v4/theming.mdx deleted file mode 100644 index c55d591b308..00000000000 --- a/versioned_docs/version-v7/developer-resources/guides/first-app-v4/theming.mdx +++ /dev/null @@ -1,56 +0,0 @@ -# Make It Your Own! Ionic Theming - -Previously, we converted our single use Camera app into an epic photo gallery. Now, let’s explore how to make the photo gallery our own with Ionic theming. The visual design of the app is incredibly important - fortunately, Ionic provides a lot for us out-of-the-box. - -Ionic has nine default colors, defined as CSS variables, that can be used to change the color of its UI components: - -![A chart showing Ionic's nine default colors with their hex codes.](/img/guides/first-app-v4/theming-defaults.png 'Ionic Default Color Palette') - -You can customize each color further by supplying a base, contrast, shade, and tint properties. These provide flexible control over your styles: - -![Table detailing the properties for customizing the primary color in Ionic, including base, contrast, shade, and tint.](/img/guides/first-app-v4/theming-properties.png 'Ionic Color Customization Properties') - -You can find these colors defined in `src/theme/variables.scss`. - -By changing these variables here and there, you can easily update the entire theme of the application! Try changing a few of them and watch the app update in DevApp. For example, change the default blue color for Primary to purple: - -```css -/** Ionic CSS Variables **/ -:root { - /** primary **/ - --ion-color-primary: #b36bff; - --ion-color-primary-rgb: 179, 107, 255; - --ion-color-primary-contrast: #000000; - --ion-color-primary-contrast-rgb: 0, 0, 0; - --ion-color-primary-shade: #9e5ee0; - --ion-color-primary-tint: #bb7aff; -} -``` - -The easiest and most powerful way to create custom color palettes for your app’s UI is Ionic's [Color Generator tool](../../../theming/color-generator.mdx). As you change a color’s hex values, the embedded demo app automatically reflects the new colors. When you've finished making changes, simply copy and paste the generated code directly into your Ionic project. - -But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to: - -![Comparing the native look of an Ionic app on iOS and Android platforms.](/img/guides/first-app-v3/ion-lab-comparison.png 'Ionic Platform Specific Styles Comparison') - -In our app, this is clearly visible in how the header and the icons are styled. - -If you want consistency, you can tell Ionic to use the same mode regardless of platform. For example, to apply Material Design (Android’s platform style), set it globally in the App Module class. Open `src/app/app.module.ts`, then set the `mode` property: - -```Javascript -imports: [ - BrowserModule, - IonicModule.forRoot({ - mode: "md" - }), - IonicStorageModule.forRoot() - ], -``` - -Now, the iOS version of our app has a Material Design skin! - -![An Ionic app with Material Design styling applied on an iOS device.](/img/guides/first-app-v3/ion-lab-md-styling.png 'Ionic Material Design Styling on iOS') - -Creating gorgeous-looking Ionic apps is easy with CSS variables and platform-specific styling. You now have everything you need to get started with Ionic. - -Go forth and build great apps! diff --git a/versioned_docs/version-v7/developer-resources/posts.mdx b/versioned_docs/version-v7/developer-resources/posts.mdx deleted file mode 100644 index a8c5b3f861c..00000000000 --- a/versioned_docs/version-v7/developer-resources/posts.mdx +++ /dev/null @@ -1,77 +0,0 @@ ---- -sidebar_label: Posts ---- - -# Community Posts - -### [What's new in Ionic 5 - Migration and Free Starter](https://ionicthemes.com/tutorials/about/ionic5-tutorial-migration-and-starter) - -Take advantage of the new benefits from Ionic 5. In this guide we describe the main changes and show you how to migrate your applications from Ionic 4 to Ionic 5. For this post we created an Ionic 5 CRUD Contacts app that you can download for free to learn how to start using Ionic 5. - -### [Ionic Navigation and Angular Routing](https://ionicthemes.com/tutorials/about/ionic-navigation-and-routing-ultimate-guide) - -Learn how to master Routing and Navigation in Ionic Angular Apps as well as some usability tricks you can add to your apps to improve the user experience! - -### [Firebase Authentication Tutorial For Ionic Apps](https://ionicthemes.com/tutorials/about/firebase-authentication-in-ionic-framework-apps) - -Learn how to add Firebase Authentication to your Ionic 5 App. This tutorial explains step by step how to configure both the Firebase and the Ionic Apps to enable authentication with social providers such as Google, Facebook and Twitter and also with Email and Password. - -### [Native Cross Platform Web Apps with Ionic Capacitor](https://ionicthemes.com/tutorials/about/native-cross-platform-web-apps-with-ionic-capacitor) - -Ionic Capacitor introduction guide for beginners: history, motivation, usage and how to migrate your existing Cordova apps to Capacitor. - -### [Ionic Skeleton Loading Screens](https://ionicthemes.com/tutorials/about/improved-ux-for-ionic-apps-with-skeleton-loading-screens) - -UI Skeletons, Ghost Elements, Shell Elements? They are all the same! Think of them as cool content placeholders that are shown where the content will eventually be once it becomes available. In this guide you will learn the importance of adopting the App Shell pattern in your ionic apps and discuss how to implement it using Ionic and Angular. Also, we explain some advanced CSS techniques to take the UX to the next level. - -### [The Complete Guide To Progressive Web Apps with Ionic](https://ionicthemes.com/tutorials/about/the-complete-guide-to-progressive-web-apps-with-ionic4) - -Learn what Progressive Web Apps are, why you should consider them for your next project, and how easy is to build a complete and production ready PWA with Ionic. - -### [Mastering Web Components in Ionic](https://ionicthemes.com/tutorials/about/ionic-4-tutorial-mastering-web-components-in-ionic-4) - -Understanding the new component architecture in Ionic, including web components, shadow DOM, CSS 4 variables and Stencil. - -### [Forms and Validations in Ionic 5](https://ionicthemes.com/tutorials/about/forms-and-validation-in-ionic) - -Learn everything about Ionic Forms and input validations in Ionic Angular apps. - -### [Building a Ionic Firebase App step by step](https://ionicthemes.com/tutorials/about/building-a-ionic-firebase-app-step-by-step) - -Learn how to make a CRUD application using Ionic Framework, Cloud Firestore for the database, and Cloud Storage for image storage. - -### [Ionic and WordPress Integration using the WordPress REST API](https://ionicthemes.com/tutorials/about/ionic-wordpress-integration) - -Learn how to connect your Ionic app with your WordPress site using the WordPress REST API. - -### [Understanding Ionic 2: Imports](http://mcgivery.com/understanding-ionic-2-imports/) - -ES6/TS introduce a new way to bring in external code. Learn about Imports. - -### [Ionic 2 / Angular 2 Concepts](https://www.joshmorony.com/ionic-2-first-look-series-new-angular-2-concepts-syntax/) - -Familiarize yourself with some of the new concepts in Ionic 2 and Angular 2. - -### [Ionic, PouchDB, & SQLite For Storage](http://gonehybrid.com/how-to-use-pouchdb-sqlite-for-local-storage-in-ionic-2/) - -Simplify storage using PouchDB and Sqlite. - -### [Advanced Google Maps](https://www.joshmorony.com/creating-an-advanced-google-maps-component-in-ionic-2/) - -Go beyond adding a simple map to handling offline conditions and complex maps. - -### [Background Geolocation](https://www.joshmorony.com/adding-background-geolocation-to-an-ionic-2-application/) - -Learn how to add geolocation that can run in the background of your app. - -### [Taking Advantage of Observables](https://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html) - -Learn how to use observables in your Ionic 2 app. - -### [Using the Angular Router in ionic/angular 4](https://www.joshmorony.com/using-angular-routing-with-ionic-4/) - -Learn how to use the Angular Router in your `@ionic/angular` 4 app. - -### [Ionic 4 examples using Angular, Vue and React](https://ionicworkshop.com/posts/introduction-to-ionic-framework-angular-vue-react/) - -Learn how to use Ionic 4 with Angular, React and Vue. diff --git a/versioned_docs/version-v7/developer-resources/tools.mdx b/versioned_docs/version-v7/developer-resources/tools.mdx deleted file mode 100644 index aa1a7301ba9..00000000000 --- a/versioned_docs/version-v7/developer-resources/tools.mdx +++ /dev/null @@ -1,21 +0,0 @@ -# Tools - -### [Angular CLI](https://github.com/angular/angular-cli) - -Learn more about the power of the Angular CLI - -### [StackBlitz](https://stackblitz.com/) - -Quickly get started with a new Ionic app entirely in the browser! - -### [TypeScript](https://www.typescriptlang.org/) - -Check out the features that make working with TypeScript amazing. - -### [Glossary](../reference/glossary.mdx) - -A list of common terms you'll see while developing in Ionic. - -### [Starter Apps](https://ionicthemes.com) - -Ionic Starter Apps to speed up and improve your app development. diff --git a/versioned_docs/version-v7/developer-resources/videos.mdx b/versioned_docs/version-v7/developer-resources/videos.mdx deleted file mode 100644 index bdc0a784d25..00000000000 --- a/versioned_docs/version-v7/developer-resources/videos.mdx +++ /dev/null @@ -1,21 +0,0 @@ -# Videos - -### [Ionic 2 Crash Course](https://www.youtube.com/watch?v=O2WiI9QrS5s&feature=youtu.be) - -A quick introduction to Ionic 2 and how to build your first app. - -### [Ionic & Async](https://blog.ionicframework.com/screencast-ionic-async/) - -Learn how to coordinate multiple events in a timely manner. - -### [Building a TODO app in Ionic 2](http://www.joshmorony.com/build-a-todo-app-from-scratch-with-ionic-2-video-tutorial/) - -Learn how to build out an entire Ionic 2 app. - -### [Angular Connect: Ionic 2](https://www.youtube.com/watch?v=bAlydPwFONY) - -Dive into some of the ideas and goals behind Ionic 2. - -### [Ionic & Typings](https://blog.ionicframework.com/ionic-and-typings/) - -Learn how to add typings for libraries you are using in your Ionic 2 app. diff --git a/versioned_docs/version-v7/intro/first-app.mdx b/versioned_docs/version-v7/intro/first-app.mdx deleted file mode 100644 index 3fc9be2b1fd..00000000000 --- a/versioned_docs/version-v7/intro/first-app.mdx +++ /dev/null @@ -1,24 +0,0 @@ ---- -hide_table_of_contents: true ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsCards from '@components/global/DocsCards'; - -# Build Your First App Tutorial - -Pick the JavaScript framework you plan to use while building your Ionic app: - - - -

A complete guide to get you up to speed with the basics of building Ionic apps with Angular.

- - - -

A complete guide to get you up to speed with the basics of building Ionic apps with React.

- - - -

A complete guide to get you up to speed with the basics of building Ionic apps with Vue.

- - diff --git a/versioned_docs/version-v7/test/page1.mdx b/versioned_docs/version-v7/test/page1.mdx deleted file mode 100644 index cd5b72410d0..00000000000 --- a/versioned_docs/version-v7/test/page1.mdx +++ /dev/null @@ -1,3 +0,0 @@ -# Testing Page 1 - -This is Testing page 1, Get to Testing Page 2 [here](page2.mdx). diff --git a/versioned_docs/version-v7/test/page2.mdx b/versioned_docs/version-v7/test/page2.mdx deleted file mode 100644 index 5ebdef8dca0..00000000000 --- a/versioned_docs/version-v7/test/page2.mdx +++ /dev/null @@ -1,3 +0,0 @@ -# Testing Page 2 - -This is Testing page 2, Get to Testing Page 1 [here](page1.mdx). diff --git a/versioned_docs/version-v8/angular/your-first-app.mdx b/versioned_docs/version-v8/angular/your-first-app.mdx index 4b38c246a42..8343b0cdb42 100644 --- a/versioned_docs/version-v8/angular/your-first-app.mdx +++ b/versioned_docs/version-v8/angular/your-first-app.mdx @@ -24,12 +24,6 @@ Here’s the finished app running on all 3 platforms: allowFullScreen > -:::note - -Looking for the previous version of this guide that covered Ionic 4 and Cordova? Refer to the [Ionic 4 and Cordova guide](../developer-resources/guides/first-app-v4/intro.mdx). - -::: - ## What We'll Build We'll create a Photo Gallery app that offers the ability to take photos with your device's camera, display them in a grid, and store them permanently on the device. diff --git a/versioned_docs/version-v8/developer-resources/courses.mdx b/versioned_docs/version-v8/developer-resources/courses.mdx deleted file mode 100644 index f95f4f3c18a..00000000000 --- a/versioned_docs/version-v8/developer-resources/courses.mdx +++ /dev/null @@ -1,107 +0,0 @@ -# Courses - -### [Elite Ionic](https://www.joshmorony.com/elite/) - -{/* cspell:disable-next-line */} - -by Josh Morony - -Elite Ionic is an online course for Ionic developers who want to move past the basics, and build complex, well tested, high performing, beautiful, and useable mobile applications. It is recommended that you already have a reasonably solid understanding of the basics of Ionic before starting this course. - -### [Ionic Academy](https://ionicacademy.com/) - -{/* cspell:disable-next-line */} - -by Simon Grimm - -Learn Ionic with step-by-step video courses & quick wins from one of the Ionic community leaders. Covers beginner, intermediate and advanced topics. Get access to a community of developers just like you. - -### [Ionic Framework: Tips, Tricks & Techniques](https://www.packtpub.com/mobile/ionic-framework-tips-tricks-and-techniques-video) - -{/* cspell:disable-next-line */} - -by Charles Muzonzini - -In this course, you will master tips and best practices for Ionic 4 & Ionic 5 that you can immediately implement to build high quality apps. This course covers a wide variety of topics from increasing app performance, to building custom native plugins, to securing your apps. It's a practical, hands-on course that will take your app building skills to the next level. - -### [Building Desktop Apps with Ionic and Electron](https://pluralsight.pxf.io/VeMXO) - -{/* cspell:disable-next-line */} - -by Michael Callaghan at Pluralsight - -Desktop development has historically required dramatically different skills than those required for web -development. The two disciplines don't mesh well. In this course, Building Desktop Apps with Ionic and Electron, -you will gain the ability to apply your hard-earned web development skills to build amazing desktop -applications. First, you will learn how to build a functional and attractive UI with Ionic and Angular. Next, -you will discover how to wrap that UI into an Electron application shell. Finally, you will explore how to -package your app and make it ready for distribution. When you are finished with this course, you will have the -skills and knowledge of Ionic and Electron development needed to deploy and distribute a beautiful app to both -Windows and macOS users. - -### [Building Progressive Web Apps with Ionic](https://pluralsight.pxf.io/Ly2EY) - -{/* cspell:disable-next-line */} - -by Michael Callaghan at Pluralsight - -Everything changed when Google created the concept of Progressive Web Applications or PWA. A PWA is a pure web -application that you can install on devices, that can function with limited network functionality, through its -use of intelligent caching. Build a Progressive Web App that will run anywhere. In this course, Building -Progressive Web Apps with Ionic, you will learn foundational knowledge and gain the ability to create a web -application that will run anywhere: the browser, desktop, or mobile clients. First, you will learn what a -Progressive Web App (or PWA) is. Next, you will discover how to use the Ionic Framework, Angular, and Firebase -to create, deploy, and optimize a basic web application into a full-blown PWA. Finally, you will explore how to -configure the application to make it installable and runnable on Androids and iPhones. When you’re finished with -this course, you will have the skills and knowledge of Ionic and PWAs needed to create and deploy your own -Progressive Web Application anywhere you desire. - -### [Ionic CLI](https://pluralsight.pxf.io/ionic-cli) - -{/* cspell:disable-next-line */} - -by Michael Callaghan at Pluralsight - -Since its inception, the Ionic Framework has included a rudimentary command line interface. Though only a few -years old, it has matured into a powerful tool that should be part of every developer’s toolbox. This course, -Ionic CLI, will start at the top and explore the Ionic CLI. First, you'll learn how to create projects and -components. Next, you will learn how to build and serve apps. Finally, you'll discover how to share projects -with others, and even integrate with other build tools. Whether you’re just starting to explore Ionic, or have -been using it since its pre-beta days, there is something here for you. By the end of the course, you’ll have -the confidence to use the Ionic CLI as part of your everyday Ionic development. - -### [Wordpress Rest API and Ionic 4 (Angular) App With Auth](https://www.udemy.com/course/wordpress-rest-api-and-ionic-3-crud/) - -{/* cspell:disable-next-line */} - -by Baljeet Singh at Udemy - -### [Building Mobile Apps with Ionic 2, Angular 2, and TypeScript](https://app.pluralsight.com/library/courses/ionic2-angular2-typescript-mobile-apps/table-of-contents) - -{/* cspell:disable-next-line */} - -by Pluralsight - -### [Introducing Ionic 2](http://shop.oreilly.com/product/0636920050353.do) - -{/* cspell:disable-next-line */} - -by Mathieu Chauvinc - -### [Ionic 2 Master Course](https://www.udemy.com/ionic-2-tutorial/) - -{/* cspell:disable-next-line */} - -by Udemy - -### [Introducing Ionic 2](https://www.udemy.com/introducing-ionic-2/) - -{/* cspell:disable-next-line */} - -by Udemy - -### [Ionic 2 Solutions](https://www.packtpub.com/web-development/ionic-2-solutions-video) - -{/* cspell:disable-next-line */} - -by Hoc Phan diff --git a/versioned_docs/version-v8/developer-resources/guides.mdx b/versioned_docs/version-v8/developer-resources/guides.mdx deleted file mode 100644 index c0590b83684..00000000000 --- a/versioned_docs/version-v8/developer-resources/guides.mdx +++ /dev/null @@ -1,9 +0,0 @@ -# Guides - -### [Your First Ionic App - v3](guides/first-app-v3/intro.mdx) - -Follow along as we create a working Photo Gallery app using Ionic Framework v3 and Appflow. - -### [Your First Ionic 4 App - Angular and Cordova](guides/first-app-v4/intro.mdx) - -Follow along as we create a working Photo Gallery app using Ionic Framework v4 and Cordova. diff --git a/versioned_docs/version-v8/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx b/versioned_docs/version-v8/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx deleted file mode 100644 index cc52ec5f895..00000000000 --- a/versioned_docs/version-v8/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.mdx +++ /dev/null @@ -1,195 +0,0 @@ -# Creating a Photo Gallery with Device Storage - -Last time, we successfully added the Camera plugin to the About page of our Tabs app. Currently, the photo is replaced each time a new one is taken. What if we wanted to display multiple photos together? Let’s create a photo gallery. You can follow along with the complete code for this in [the part 2 folder](https://github.com/ionic-team/photo-gallery-tutorial-ionic3/tree/master/part2) on GitHub. - -## Creating a Dedicated Photo Service - -From a terminal window, navigate to your Ionic project and run: - -```shell -ionic g provider PhotoProvider -``` - -This creates a PhotoProvider class in a dedicated providers/photo folder: - -```Javascript -import { HttpClient } from '@angular/common/http'; -import { Injectable } from '@angular/core'; - -/* - Generated class for the PhotoProvider provider. - - See https://angular.io/guide/dependency-injection for more info on providers - and Angular DI. -*/ -@Injectable() -export class PhotoProvider { - - constructor(public http: HttpClient) { - console.log('Hello PhotoProvider Provider'); - } -} -``` - -Within this class, add a Photo class. The “data” property represents the base64 image data of a captured photo: - -```Javascript -class Photo { - data: any; -} -``` - -Then, create a Photos array to represent our photo gallery: - -```Javascript -export class PhotoProvider { - - public photos: Photo[] = []; - - constructor() { } -} -``` - -Back in `about.ts`, import PhotoProvider: - -```Javascript -import { PhotoProvider } from '../../providers/photo/photo'; -``` - -Add it to the Constructor: - -```Javascript -constructor(private camera: Camera, public photoService: PhotoProvider) { } -``` - -Next, move all code pertaining to the Camera plugin to the PhotoService class. This includes the takePicture method, the Camera import, and the About page constructor. Also, remove references to HttpClient - we won’t be making any HTTP calls. - -Continuing on, we need to convert currentImage variable references to the new photos array. Start by adding the captured photo data into the photos array: - -```Javascript -this.camera.getPicture(options).then((imageData) => { - // Add new photo to gallery - this.photos.unshift({ - data: 'data:image/jpeg;base64,' + imageData - }); }, (err) => { - // Handle error - console.log("Camera issue: " + err); -}); -``` - -In `about.page.ts`, remove the currentImage variable and the reference to Camera in the constructor, leaving only PhotoService: - -```Javascript -export class AboutPage { - constructor(public navCtrl: NavController, public photoService: PhotoProvider) { } -} -``` - -Next, in `about.page.html`, remove the currentImage img tag. In its place, use an ion-grid component, which provides a great way to arrange elements on a page. In this case, we’ll use it to display 2 photos per row. - -```html - - - - - - - -``` - -Here, we loop through each photo in the PhotoServices photos array, adding a new column for each. Since an ion-row consists of 12 “blocks” of space, and we’re setting the size to 6 (“col-6”), only 2 photos are displayed per row. - -Last, update the Fab button to call the PhotoProvider’s `takePicture` method: - -```Html - - - -``` - -Save the file and watch - a camera button appears! Tap on it and notice that it doesn’t do anything. Let’s fix that next. - -## Add the Camera Dependencies via the CLI - -In order to use the Camera, we need to bring in its JavaScript and native library dependencies. Back over in your Terminal window, run the following command, which adds the JavaScript library to the project, thus exposing the Camera API in TypeScript code: - -```shell -npm install --save @awesome-cordova-plugins/camera -``` - -In `package.json`, you’ll notice a new JavaScript dependency has been added: - -`"@awesome-cordova-plugins/camera": "^4.12.0"` - -Next, run this command to add the native iOS and Android code, effectively allowing the Camera to work on a mobile device: - -```shell -ionic cordova plugin add cordova-plugin-camera -``` - -In `config.xml`, a new plugin entry is created: - -```xml - -``` - -The next step is only required for iOS users. As of iOS 10, developers must provide a reason for why the app wishes to access the device camera. Add this to the bottom of `config.xml`: - -```xml - - - Used to take pictures - -``` - -## Add Camera plugin to Angular App Module - -There’s one more step we need to do since this is an Angular project: register the Camera in the App Module (`src/app/app.module.ts`). First, import the Camera module: - -```Javascript -import { Camera } from '@awesome-cordova-plugins/camera'; -``` - -Then, add it as a Provider: - -```Javascript -providers: [ - StatusBar, - SplashScreen, - Camera, - {provide: ErrorHandler, useClass: IonicErrorHandler} - ], -``` - -It can now be used on any of our App pages. - -## Add the Camera to the About page - -Our camera button doesn’t do anything yet. Over in `about.html`, add a click handler to the button: - -```html - -``` - -Then, update the image placeholder. The following binds the “currentImage” variable (which we’ll work on next) to the image to display to the user. - -```html - -``` - -Open `about.ts` next and import the Camera library: - -```Javascript -import { Camera, CameraOptions } from '@awesome-cordova-plugins/camera'; -``` - -Next, define the “currentImage” variable and inject the Camera into this class via the constructor: - -```Javascript -export class AboutPage { - currentImage: any; - - constructor(public navCtrl: NavController, private camera: Camera) { -} -``` - -Finally, add the “takePicture” method, already wired up to execute once the camera button has been tapped: - -```Javascript -takePicture() { - const options: CameraOptions = { - quality: 100, - destinationType: this.camera.DestinationType.DATA_URL, - encodingType: this.camera.EncodingType.JPEG, - mediaType: this.camera.MediaType.PICTURE - } - - this.camera.getPicture(options).then((imageData) => { - this.currentImage = 'data:image/jpeg;base64,' + imageData; - }, (err) => { - // Handle error - console.log("Camera issue:" + err); - }); - } -``` - -Take notice: there’s no mention of iOS or Android! This is the awesome power of plugins: you use one API (`camera.getPicture()` in this case) and the plugin takes care of the platform differences for you. Write once, run everywhere `:)` - -Save this file then tap the Camera button in DevApp. Voila! The camera should open on your device. Once a photo has been taken, it displays on the Photo Gallery page. - -Finally, back up your changes to Appflow: - -```shell -git add . -git commit -m “added camera functionality” -git push ionic master -``` - -Next, we’ll cover how to transform the app into a photo gallery, as well as how to save the photos to your device! diff --git a/versioned_docs/version-v8/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx b/versioned_docs/version-v8/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx deleted file mode 100644 index ff1d1fcff85..00000000000 --- a/versioned_docs/version-v8/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.mdx +++ /dev/null @@ -1,193 +0,0 @@ -# Realtime App Updates with Appflow Live Updates - -As demonstrated so far, building web and mobile apps is quick and easy with the Ionic Framework. However, nothing disrupts rapid iteration faster than App Store delays. Fortunately, with Appflow’s Deploy feature, you can send live code changes directly to your users. Paired with seamless background updates, they are always upgraded to the latest version. - -Setting it up is quick and easy. For reference, continue to refer to [the part 3 folder](https://github.com/ionic-team/photo-gallery-tutorial-ionic3/tree/master/part3) on GitHub. First, install the Appflow JavaScript library: - -```shell -npm install @ionic/pro@latest --save -``` - -Then, add the Appflow plugin. Here’s the command to install it: - -```shell -$ ionic cordova plugin add cordova-plugin-ionic@latest --save ---variable APP_ID=YOUR_APP_ID --variable CHANNEL_NAME=YOUR_CHANNEL_NAME -``` - -There are two unique values to provide: your app id and channel name. Sign into Appflow, then find the App Id on your app’s dashboard: - -![The location of the App ID in the Appflow dashboard.](/img/guides/first-app-v3/app-id-location.png 'Appflow App ID Location') - -And we’ll just use “Master” as the channel name. Putting this together looks like: - -```shell -$ ionic cordova plugin add cordova-plugin-ionic@latest --save ---variable APP_ID=381533B9 --variable CHANNEL_NAME=Master -``` - -After this plugin has been added, you’ll notice that `config.xml` and `package.json` have been updated with your app’s details: - -```xml - - - - - - - - - -``` - -Next, modify `src/app/app.module.ts` to include the initialization of Appflow on app startup: - -```javascript -import { Pro } from '@ionic/pro'; - -Pro.init('YOUR_APP_ID', { - appVersion: 'APP_VERSION', -}); -``` - -As an example, this would look like: - -```javascript -Pro.init('381533B9', { - appVersion: '0.0.1', -}); -``` - -Next, push the code up to Appflow: - -```shell -git add . -git commit -m “adding Appflow” -git push ionic master -``` - -Next, create a local, native build of the app. - -## Android Builds - -Follow the [Android Setup instructions](../../../developing/android.mdx), which includes installing Java 8 and Android Studio on your machine. Then, in your Terminal run: - -```shell -ionic cordova build android --prod -``` - -This will generate a unsigned debug build (meaning the app can run on any Android device). - -## iOS Builds - -iOS is [a bit trickier to set up](../../../developing/ios.mdx) than Android and requires a Mac computer. Ensure XCode is updated to the latest version and set up a development team. Then, in your Terminal, run: - -```shell -ionic cordova build ios --prod -``` - -Then, continue to follow the [app store deployment instructions](../../../deployment/app-store.mdx) regarding signing certificates, etc. With a native version of your app built, let’s copy it to your device of choice. - -## Add the Native App to Your Local Device - -Now comes the fun part: testing out the native app on your device! For iOS, the easiest way (that works for both PC and Mac) involves using iTunes. Connect your iOS device, locate your IPA file, then drag and drop the IPA file from the file system onto your device in iTunes. The app will install immediately and be ready for use: - -
-
- -
-
- - -For Android testing, the easiest way across all OS platforms is to use [Android Studio](https://developer.android.com/studio/), Google’s official Android IDE. After downloading it, connect your Android device to your computer. On the Studio startup screen, select “Profile or debug APK”, then select the recently built APK file. - -In the upper right hand corner, click the Play button. Select your connected device, then click OK: - -
-
- -
-
- - -## Deploying Changes - -With Appflow Deploy, any JavaScript, HTML, or CSS changes can be pushed automatically to app users. Open the Photo Gallery app in your favorite code editor, then update the title of the Gallery page: - -```html - - - Photo Viewer - - -``` - -Next, push the code up to Appflow: - -```shell -$ git add . -$ git commit -m “change name to Photo Viewer” -$ git push ionic master -``` - -Log into the [Appflow dashboard](https://dashboard.ionicframework.com) and navigate to Deploy -> Builds. This newest commit begins to build immediately. Since we assigned the Appflow plugin to the Master branch (the one we always Git Push to), the Channel label will also point to this commit, effectively auto-deploying this change to all app users: - -![The Deploy Builds section in the Appflow dashboard.](/img/guides/first-app-v3/deploy-channel.png 'Appflow Deploy Builds') - -A Channel points to a specific JavaScript Build or Snapshot of your app that will be shared with devices listening to that channel for updates. You can change which Build a Channel points to whenever you’d like. - -Each time a user launches our Photo Gallery app, it will poll for updates from Appflow. If new code is available, the update is downloaded in the background. There are [a handful of ways](https://ionic.io/docs/appflow/deploy/api#update_method) to control how updates are performed, but by default they will be applied the next time the user closes then opens the app. - -When the latest Build has been successful, close your local copy of Photo Gallery app or put it in the background for 30 seconds (the [MIN_BACKGROUND_DURATION default](https://ionic.io/docs/appflow/deploy/api#min_background_duration)), then reopen it. The title of the Photo Gallery page should change from “Photo Gallery” to “Photo Viewer.” - -What if you deploy a change, then realize that there is a bug? Or perhaps you’re just not happy with the name “Photo Viewer?” No problem: Appflow Deploy makes it easy to roll back changes as well! - -On the Deploy Builds page, click the “Assign to Channel” button on the previous commit, then click “Deploy.” App users will be reverted to the previous version, and our “Photo Gallery” name has been restored. - -![The Deploy Builds section in Appflow with a commit labeled 'set name to Photo Gallery' being assigned to the master channel for rollback.](/img/guides/first-app-v3/deploy-revertChange.png 'Appflow Deploy Revert Change') - -This was just a taste of what you can do with Appflow Live Updates! You can also set up multiple deployment channels to send targeted updates to specific groups of users. Use it to run A/B tests, or target the distribution of updates by audience, geography, or test group. - -## Stuck on creating local native builds? - -Building native app binaries for Android and iOS can be painful. The tooling isn’t great, new OS versions often result in challenging upgrades, and creating consistent builds across your dev team can be frustrating. Fortunately, Appflow’s Package feature makes this easy: simply upload your iOS certificate and Android keystore files, then we take care of the rest! - -[Start packaging your app in the cloud](https://dashboard.ionicframework.com/settings/billing) along with 10,000 Ionic Deploys per month. - -Up next, we cover Appflow Monitoring - track your app errors in realtime. diff --git a/versioned_docs/version-v8/developer-resources/guides/first-app-v3/theming.mdx b/versioned_docs/version-v8/developer-resources/guides/first-app-v3/theming.mdx deleted file mode 100644 index 077186843fc..00000000000 --- a/versioned_docs/version-v8/developer-resources/guides/first-app-v3/theming.mdx +++ /dev/null @@ -1,47 +0,0 @@ -# Make It Your Own! Ionic Theming - -Previously, we converted our single use Camera app into an epic photo gallery. Now, let’s explore how to make the photo gallery our own with Ionic theming. The visual design of the app is incredibly important - fortunately, Ionic provides a lot for us out-of-the-box. You can find the code for this in [the “part 3” folder](https://github.com/ionic-team/photo-gallery-tutorial-ionic3/tree/master/part3) on GitHub. - -Ionic has five default colors, defined as Sass variables, that can be used to change the color of its UI components: - -![Ionic's default Sass color variables for theming: 'primary", secondary, danger, light, and dark.](/img/guides/first-app-v3/v3-theming.png 'Default Ionic Sass Variables') - -You can customize each color further by supplying a base and contract property. Base acts as the background color and contrast acts as the text color for most components. This provides much more flexible control over your styles: - -![Code snippet showing customized Ionic Sass variables with additional twitter color base and contrast properties.](/img/guides/first-app-v3/v3-themeColors.png 'Customized Ionic Sass Variables') - -You can find these colors defined in `src/theme/variables.scss`. - -By changing these variables here and there, you can easily update the entire theme of the application! Try changing a few of them and watch the app update in DevApp. For example, change the default blue color for Primary to purple: - -```Css -$colors: ( - primary: #7044ff, -) -``` - -But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to: - -![Comparing the native look of an Ionic app on iOS and Android platforms.](/img/guides/first-app-v3/ion-lab-comparison.png 'Ionic Platform Specific Styles Comparison') - -In our app, this is clearly visible in how the header and the icons are styled. - -If you want consistency, you can tell Ionic to use the same mode regardless of platform. For example, to apply Material Design (Android’s platform style), set it globally in the App Module class. Open `src/app/app.module.ts`, then set the `mode` property: - -```Javascript -imports: [ - BrowserModule, - IonicModule.forRoot(MyApp, { - mode: "md" - }, null), - IonicStorageModule.forRoot() - ], -``` - -Now, the iOS version of our app has a Material Design skin! - -![An Ionic app with Material Design styling applied on an iOS device.](/img/guides/first-app-v3/ion-lab-md-styling.png 'Ionic Material Design Styling on iOS') - -Creating gorgeous-looking Ionic apps is easy with Sass variables and platform-specific styling. You now have everything you need to get started with Ionic. Go forth and build great apps! - -If you're interested in taking your Ionic apps to the next level, continue on with our exploration of Appflow next. diff --git a/versioned_docs/version-v8/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx b/versioned_docs/version-v8/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx deleted file mode 100644 index 858da2cc914..00000000000 --- a/versioned_docs/version-v8/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.mdx +++ /dev/null @@ -1,92 +0,0 @@ -# Track Bugs in Realtime with Ionic Monitoring - -Bugs happen, and can be hard to track down - especially with hundreds of possible combinations of mobile devices and operating systems. Appflow Monitoring allows you to track errors in your app on users’ phones and it sends them directly to you instantly, even if your code is minified! - -Reducing customer frustration by fixing major issues quickly in your production apps are a substantial part of providing a high quality app experience. Combined with Appflow Deploy, new updates can be rolled out quickly to address problems in real-time. - -To begin, let’s add a global error handler that will catch and report all unhandled exceptions that occur in the app. Open `src/app/app.module.ts`, then add two import statements: - -```javascript -import { ErrorHandler, Injectable, Injector } from '@angular/core'; -import { IonicErrorHandler } from 'ionic-angular'; -``` - -Next, create an error handler class calls the Monitoring service’s API whenever any errors have been encountered: - -```javascript -@Injectable() -export class MyErrorHandler implements ErrorHandler { - ionicErrorHandler: IonicErrorHandler; - - constructor(injector: Injector) { - try { - this.ionicErrorHandler = injector.get(IonicErrorHandler); - } catch (e) { - // Unable to get the IonicErrorHandler provider, ensure - // IonicErrorHandler has been added to the providers list below - } - } - - handleError(err: any): void { - Pro.monitoring.handleNewError(err); - - this.ionicErrorHandler && this.ionicErrorHandler.handleError(err); - } -} -``` - -Then, within the providers array, update IonicErrorHandler to MyErrorHandler: - -```javascript -{provide: ErrorHandler, useClass: MyErrorHandler}, -``` - -It should then look like: - -```javascript -providers: [ - // ... - IonicErrorHandler, - [{ provide: ErrorHandler, useClass: MyErrorHandler }], -]; -``` - -Next, let’s intentionally create a bug so we can demonstrate the power of Ionic Monitoring. Open `about.html` and rename the takePicture method to something that doesn’t exist, such as “takePhoto”: - -```html - -``` - -With this change in place, anytime a user taps on the Camera button, an exception will be thrown and sent to Ionic’s Monitoring service. - -Last, we need to need to create a Source Map for your app. This file makes it easy for Monitoring to pinpoint problems by providing stack traces that map back to the original, unminified TypeScript code. - -Sync the current version of the app by running the following: - -```shell -ionic monitoring syncmaps -``` - -With our intentional error in place, let’s try it out to find out what happens. Run your app locally: - -```shell -ionic serve -``` - -Tap on the Gallery tab, then the camera button. A runtime error should occur. In a browser, head over to the [Appflow dashboard](https://dashboard.ionicframework.com), then Monitor -> Monitoring. After a few minutes, the error should appear: - -![An event showing error 'takePhoto is not a function' with status 'New'.](/img/guides/first-app-v3/monitoring-event.png 'Ionic Monitoring Event Overview') - -Clicking on the event gives us lots of details surrounding what happened, such as a full stack trace. In this instance, the error occurred three times on Mac OS X in the Chrome web browser. - -![Detailed view of an event log displaying a TypeError stack trace and error details such as device, browser, and operating system.](/img/guides/first-app-v3/monitoring-details.png 'Detailed Ionic Monitoring Event Log') - -Given the proliferation of mobile devices and operating systems these days, this is immensely powerful. Armed with these details, we can hone in on the problem and fix it quickly. - -This is a TypeScript bug, meaning a fix can be released using Live Updates. Give it a try! - -- Revert the method back to “takePicture.” -- Push the fix using Git. Remember, “git push ionic master.” -- Roll out the fix using Live Updates from the Ionic dashboard. - -Supporting hundreds of mobile device types is so much easier with Appflow Monitoring. [Upgrade to the Appflow Developer plan today](https://dashboard.ionicframework.com/settings/billing) to get instant notification when bugs occur, save error history for sixty days (instead of seven), and unlock 10,000 live Deploy updates per month! diff --git a/versioned_docs/version-v8/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx b/versioned_docs/version-v8/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx deleted file mode 100644 index 5b70127be9c..00000000000 --- a/versioned_docs/version-v8/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.mdx +++ /dev/null @@ -1,202 +0,0 @@ -import DocsButton from '@components/page/native/DocsButton'; - -# Creating a Photo Gallery with Device Storage - -Last time, we successfully added the Camera plugin to the Tab2 page of our Tabs app. Currently, the photo is replaced each time a new one is taken. What if we wanted to display multiple photos together? Let’s create a photo gallery. You can follow along with the complete code for this [on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4). - -## Creating a Dedicated Photo Service - -From a terminal window, navigate to your Ionic project and run: - -```shell -ionic g service services/Photo -``` - -This creates a PhotoService class in a dedicated "services" folder: - -```Javascript -import { Injectable } from '@angular/core'; - -@Injectable({ - providedIn: 'root' -}) -export class PhotoService { - constructor() { } -} -``` - -Within this file, add a Photo class. The “data” property represents the base64 image data of a captured photo: - -```Javascript -class Photo { - data: any; -} -``` - -Then, create a Photos array to represent our photo gallery: - -```Javascript -export class PhotoService { - - public photos: Photo[] = []; - - constructor() { } -} -``` - -Back in `tab2.page.ts`, import PhotoService: - -```Javascript -import { PhotoService } from '../services/photo.service'; -``` - -Add it to the Constructor: - -```Javascript -constructor(private camera: Camera, public photoService: PhotoService) { } -``` - -Next, move all code pertaining to the Camera plugin to the PhotoService class. This includes the takePicture method, the Camera and CameraOptions imports, and the Tab2Page page constructor. - -Continuing on, we need to convert currentImage variable references to the new photos array. Start by adding the captured photo data into the photos array: - -```Javascript -this.camera.getPicture(options).then((imageData) => { - // Add new photo to gallery - this.photos.unshift({ - data: 'data:image/jpeg;base64,' + imageData - }); }, (err) => { - // Handle error - console.log("Camera issue: " + err); -}); -``` - -In `tab2.page.ts`, remove the currentImage variable and the reference to Camera in the constructor, leaving only PhotoService: - -```Javascript -export class Tab2Page { - constructor(public photoService: PhotoService) { } -} -``` - -Next, in `tab2.page.html`, remove the currentImage img tag. In its place, use an ion-grid component, which provides a great way to arrange elements on a page. In this case, we’ll use it to display 2 photos per row. - -```html - - - - - - - -``` - -Here, we loop through each photo in the PhotoServices photos array, adding a new column for each. Since an ion-row consists of 12 “blocks” of space, and we’re setting the size to 6 (`size="6"`), only 2 photos are displayed per row. - -Last, update the Fab button to call the PhotoService’s `takePicture` method: - -```Html - - - -``` - -Excellent! We now have a basic photo gallery working. - -## Saving photos to the device - -Having a working photo gallery is pretty cool, but you’ll likely notice that when the app is closed, the photos are lost forever. That’s no good, so let’s add the [Ionic Storage plugin](https://ionicframework.com/docs/storage/), as easy way to store key/value pairs and JSON objects. When running in a native app context, Storage will prioritize using SQLite, one of the most stable and widely used file-based databases. When running on the web or as a Progressive Web App, Storage will attempt to use IndexedDB, WebSQL, and localstorage, in that order. - -The Storage plugin works perfectly for our base64 image data. To begin, add the SQLite plugin for native: - -```shell -ionic cordova plugin add cordova-sqlite-storage -``` - -Next, add the JavaScript library for the web: - -```shell -npm install --save @ionic/storage -``` - -Last, import the Storage module and add it to the imports list in `app.module.ts`: - -```Javascript -import { IonicStorageModule } from '@ionic/storage'; - -@NgModule({ - declarations: [AppComponent], - entryComponents: [], - imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, - IonicStorageModule.forRoot() - ], - providers: [ - StatusBar, - SplashScreen, - Camera, - { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } - ], - bootstrap: [AppComponent] -}) -export class AppModule {} -``` - -It’s now ready to be used in our PhotoService class. Import it: - -```Javascript -import { Storage } from '@ionic/storage-angular'; -``` - -Then inject it via the constructor: - -```Javascript -constructor(private camera: Camera, private storage: Storage) { } -``` - -To add the capability to save photos, there’s only a couple steps left. Update the `takePicture()` method to save the entire photos array after each photo is taken using the storage.set method: - -```Javascript -this.camera.getPicture(options).then((imageData) => { - // Add new photo to gallery - this.photos.unshift({ - data: 'data:image/jpeg;base64,' + imageData - }); - - // Save all photos for later viewing - this.storage.set('photos', this.photos); -}, (err) => { - // Handle error - console.log("Camera issue: " + err); -}); -``` - -We still need to load the saved photos when the app is first opened. This is simple enough - retrieve the “photos” key then assign its value to the photos array: - -```Javascript -loadSaved() { - this.storage.get('photos').then((photos) => { - this.photos = photos || []; - }); -} -``` - -Over in the Tab2 page, call the loadSaved method once it begins loading: - -```Javascript -ngOnInit() { - this.photoService.loadSaved(); -} -``` - -Sweet! Photos are now saved to your device. To demonstrate that they are indeed being saved, force close DevApp, reopen it, and open the Tab2 page. Or, shake your device to have the Control Menu pop up, then tap “Exit preview.” Afterwards, reload this app to view the photos. - -Next up, we’ll cover how to apply a custom theme to an Ionic app. - -
- - Continue{' '} - - - - -
diff --git a/versioned_docs/version-v8/developer-resources/guides/first-app-v4/intro.mdx b/versioned_docs/version-v8/developer-resources/guides/first-app-v4/intro.mdx deleted file mode 100644 index a2481a35344..00000000000 --- a/versioned_docs/version-v8/developer-resources/guides/first-app-v4/intro.mdx +++ /dev/null @@ -1,97 +0,0 @@ -# Your First Ionic App: Angular - -The great thing about Ionic is that with one codebase, you can build for any platform using familiar web tools and languages. Follow along as we create a working Photo Gallery. Here’s the before and after: - -![An Ionic app's transformation from a blank 'Tab Two' to a 'Photo Gallery' with images.](/img/guides/first-app-v3/gallery-combined.png 'Ionic App Before and After Photo Gallery') - -It’s easy to get started. Note that all code referenced in this guide can be [found on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4/). - -## Required Tools - -Download/install these right away to ensure an optimal Ionic development experience: - -- [Git](https://git-scm.com/downloads) for version control. -- **SSH client**, such as [PuTTy](https://putty.software/), for secure login to Appflow. -- **Node.js** for interacting with the Ionic ecosystem. [Download the LTS version](https://nodejs.org/en/). -- **A code editor** for... writing code! We are fans of [Visual Studio Code](https://code.visualstudio.com/). -- **Command-line terminal (CLI)**: FYI **Windows** users, for the best Ionic experience, we - recommend the built-in command line (cmd) or the Powershell CLI, running in Administrator mode. For **Mac/Linux** users, virtually any terminal will work. - -## Install Ionic and Cordova - -Run the following in the command line: - -```shell -npm install -g @ionic/cli cordova -``` - -:::note - -The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur. - -Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../../../developing/tips.mdx#resolving-permission-errors) for more information. - -::: - -## Create an App - -Next, create an Ionic Angular app using our “Tabs” app template: - -```shell -ionic start photo-gallery tabs -``` - -This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily! - -Next, change into the app folder: - -```shell -cd photo-gallery -``` - -That’s it! Now for the fun part - let’s run the app. - -## Run the App - -Run this command next: - -```shell -ionic serve -``` - -And voilà! Your Ionic app is now running in a web browser. Most of your app can be built right in the browser, greatly increasing development speed. - -## Photo Gallery!!! - -There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to add camera functionality. Let’s begin to transform this page into a Photo Gallery. Ionic features LiveReload, so when you make changes and save them, the app is updated immediately! - -![Animated GIF demonstrating the LiveReload feature in Ionic, showing real-time updates in the app after code changes.](/img/guides/first-app-v3/email-photogallery.gif 'Ionic LiveReload Feature Demonstration') - -Open the photo-gallery app folder in your favorite code editor of choice, then navigate to `/src/app/tab2/tab2.page.html`. It contains: - -```html - - - Tab Two - - - - -``` - -`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title. We put our app code into `ion-content`. In this case, it’s where we’ll add a button that opens the device’s camera and shows the image captured by the camera. But first, let’s start with something obvious: renaming the Tab Two page: - -```html -Photo Gallery -``` - -Next, open `src/app/tabs/tabs.page.html`. Change the label to “Gallery” and the icon name to “images”: - -```html - - - Gallery - -``` - -That’s just the start of all the cool things we can do with Ionic. Up next, we’ll deploy the app to your iOS or Android device, then continue building the photo gallery. diff --git a/versioned_docs/version-v8/developer-resources/guides/first-app-v4/ios-android-camera.mdx b/versioned_docs/version-v8/developer-resources/guides/first-app-v4/ios-android-camera.mdx deleted file mode 100644 index 8e1c8b15d11..00000000000 --- a/versioned_docs/version-v8/developer-resources/guides/first-app-v4/ios-android-camera.mdx +++ /dev/null @@ -1,154 +0,0 @@ -# Android, iOS, and the Camera - Oh My! - -Previously, we got an Ionic app up and running locally in a web browser. Now, let’s get it onto your iOS or Android device, then start building the photo gallery feature. - -## Add Cordova iOS and Android Platforms - -Ionic leverages the open source [Cordova project](https://cordova.apache.org/docs/en/latest/guide/overview/) to provide native hardware support. We begin by adding the iOS and Android _platforms_ then will add specific _plugins_ like the Camera afterwards: - -```shell -$ ionic cordova platform add ios -$ ionic cordova platform add android -``` - -These commands will create a `config.xml` file, which is used to define Cordova iOS and Android settings. Cordova reads this file and applies each setting as it builds each native app binary. - -There are more steps to configure [iOS](../../../developing/ios.mdx) and [Android](../../../developing/android.mdx) native tooling. - -Much better! Now we can add the camera functionality. By the way, you can find reference code for this [on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4). - -Back in `tab2.page.html`, add the following: - -```html - - - - - - - - - -``` - -Save the file and watch - a camera button appears! Tap on it and notice that it doesn’t do anything. Let’s fix that next. - -## Add the Camera Dependencies via the CLI - -In order to use the Camera, we need to bring in its JavaScript and native library dependencies. Back over in your Terminal window, run the following command, which adds the JavaScript library to the project, thus exposing the Camera API in TypeScript code: - -```shell -npm install @awesome-cordova-plugins/camera -``` - -In `package.json`, you’ll notice a new JavaScript dependency has been added, with a version number similar to the following: - -`"@awesome-cordova-plugins/camera": "^5.4.0"` - -Next, run this command to add the native iOS and Android code, effectively allowing the Camera to work on a mobile device. For more info on how this works, read up on [Cordova](https://cordova.apache.org/docs/en/latest/guide/overview/) and [Ionic Native](https://ionicframework.com/docs/native). - -```shell -ionic cordova plugin add cordova-plugin-camera -``` - -The `config.xml` file is now updated with an entry similar to the following for the native camera code: - -```xml - -``` - -The next step is only required for iOS users. As of iOS 10, developers must provide a reason for why the app wishes to access the device camera. Add this inside the ios platform section () of `config.xml`: - -```xml - - - Used to take pictures - -``` - -## Add Camera plugin to Angular App Module - -There’s one more step we need to do since this is an Angular project: register the Camera in the App Module (`src/app/app.module.ts`). First, import the Camera module: - -```Javascript -import { Camera } from '@awesome-cordova-plugins/camera/ngx'; -``` - -Then, add it as a Provider: - -```Javascript -providers: [ - StatusBar, - SplashScreen, - Camera, - {provide: ErrorHandler, useClass: IonicErrorHandler} - ], -``` - -It can now be used on any of our App pages. - -## Add the Camera to the Gallery page - -Our camera button doesn’t do anything yet. Over in `tab2.page.html`, add a click handler to the button: - -```html - - - - - -``` - -Then, update the image placeholder. The following binds the “currentImage” variable (which we’ll work on next) to the image to display to the user. - -```html - -``` - -Open `tab2.page.ts` next and import the Camera library: - -```Javascript -import { Camera, CameraOptions } from '@awesome-cordova-plugins/camera/ngx'; -``` - -Next, define the “currentImage” variable and inject the Camera into this class via the constructor: - -```Javascript -export class Tab2Page { - currentImage: any; - - constructor(private camera: Camera) { } -} -``` - -Finally, add the “takePicture” method in `tab2.page.ts`. It is already wired up to execute once the camera button has been tapped: - -```Javascript -export class Tab2Page { - currentImage: any; - - constructor(private camera: Camera) { } - - takePicture() { - const options: CameraOptions = { - quality: 100, - destinationType: this.camera.DestinationType.DATA_URL, - encodingType: this.camera.EncodingType.JPEG, - mediaType: this.camera.MediaType.PICTURE - }; - - this.camera.getPicture(options).then((imageData) => { - this.currentImage = 'data:image/jpeg;base64,' + imageData; - }, (err) => { - // Handle error - console.log("Camera issue:" + err); - }); - } -} -``` - -Take notice: there’s no mention of iOS or Android! This is the awesome power of plugins: you use one API (`camera.getPicture()` in this case) and the plugin takes care of the platform differences for you. Write once, run everywhere. 😀 - -Save this file then tap the Camera button in DevApp. Voila! The camera should open on your device. Once a photo has been taken, it displays on the Photo Gallery page. - -Next, we’ll cover how to transform the app into a photo gallery, as well as how to save the photos to your device! diff --git a/versioned_docs/version-v8/developer-resources/guides/first-app-v4/theming.mdx b/versioned_docs/version-v8/developer-resources/guides/first-app-v4/theming.mdx deleted file mode 100644 index c55d591b308..00000000000 --- a/versioned_docs/version-v8/developer-resources/guides/first-app-v4/theming.mdx +++ /dev/null @@ -1,56 +0,0 @@ -# Make It Your Own! Ionic Theming - -Previously, we converted our single use Camera app into an epic photo gallery. Now, let’s explore how to make the photo gallery our own with Ionic theming. The visual design of the app is incredibly important - fortunately, Ionic provides a lot for us out-of-the-box. - -Ionic has nine default colors, defined as CSS variables, that can be used to change the color of its UI components: - -![A chart showing Ionic's nine default colors with their hex codes.](/img/guides/first-app-v4/theming-defaults.png 'Ionic Default Color Palette') - -You can customize each color further by supplying a base, contrast, shade, and tint properties. These provide flexible control over your styles: - -![Table detailing the properties for customizing the primary color in Ionic, including base, contrast, shade, and tint.](/img/guides/first-app-v4/theming-properties.png 'Ionic Color Customization Properties') - -You can find these colors defined in `src/theme/variables.scss`. - -By changing these variables here and there, you can easily update the entire theme of the application! Try changing a few of them and watch the app update in DevApp. For example, change the default blue color for Primary to purple: - -```css -/** Ionic CSS Variables **/ -:root { - /** primary **/ - --ion-color-primary: #b36bff; - --ion-color-primary-rgb: 179, 107, 255; - --ion-color-primary-contrast: #000000; - --ion-color-primary-contrast-rgb: 0, 0, 0; - --ion-color-primary-shade: #9e5ee0; - --ion-color-primary-tint: #bb7aff; -} -``` - -The easiest and most powerful way to create custom color palettes for your app’s UI is Ionic's [Color Generator tool](../../../theming/color-generator.mdx). As you change a color’s hex values, the embedded demo app automatically reflects the new colors. When you've finished making changes, simply copy and paste the generated code directly into your Ionic project. - -But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to: - -![Comparing the native look of an Ionic app on iOS and Android platforms.](/img/guides/first-app-v3/ion-lab-comparison.png 'Ionic Platform Specific Styles Comparison') - -In our app, this is clearly visible in how the header and the icons are styled. - -If you want consistency, you can tell Ionic to use the same mode regardless of platform. For example, to apply Material Design (Android’s platform style), set it globally in the App Module class. Open `src/app/app.module.ts`, then set the `mode` property: - -```Javascript -imports: [ - BrowserModule, - IonicModule.forRoot({ - mode: "md" - }), - IonicStorageModule.forRoot() - ], -``` - -Now, the iOS version of our app has a Material Design skin! - -![An Ionic app with Material Design styling applied on an iOS device.](/img/guides/first-app-v3/ion-lab-md-styling.png 'Ionic Material Design Styling on iOS') - -Creating gorgeous-looking Ionic apps is easy with CSS variables and platform-specific styling. You now have everything you need to get started with Ionic. - -Go forth and build great apps! diff --git a/versioned_docs/version-v8/developer-resources/posts.mdx b/versioned_docs/version-v8/developer-resources/posts.mdx deleted file mode 100644 index a8c5b3f861c..00000000000 --- a/versioned_docs/version-v8/developer-resources/posts.mdx +++ /dev/null @@ -1,77 +0,0 @@ ---- -sidebar_label: Posts ---- - -# Community Posts - -### [What's new in Ionic 5 - Migration and Free Starter](https://ionicthemes.com/tutorials/about/ionic5-tutorial-migration-and-starter) - -Take advantage of the new benefits from Ionic 5. In this guide we describe the main changes and show you how to migrate your applications from Ionic 4 to Ionic 5. For this post we created an Ionic 5 CRUD Contacts app that you can download for free to learn how to start using Ionic 5. - -### [Ionic Navigation and Angular Routing](https://ionicthemes.com/tutorials/about/ionic-navigation-and-routing-ultimate-guide) - -Learn how to master Routing and Navigation in Ionic Angular Apps as well as some usability tricks you can add to your apps to improve the user experience! - -### [Firebase Authentication Tutorial For Ionic Apps](https://ionicthemes.com/tutorials/about/firebase-authentication-in-ionic-framework-apps) - -Learn how to add Firebase Authentication to your Ionic 5 App. This tutorial explains step by step how to configure both the Firebase and the Ionic Apps to enable authentication with social providers such as Google, Facebook and Twitter and also with Email and Password. - -### [Native Cross Platform Web Apps with Ionic Capacitor](https://ionicthemes.com/tutorials/about/native-cross-platform-web-apps-with-ionic-capacitor) - -Ionic Capacitor introduction guide for beginners: history, motivation, usage and how to migrate your existing Cordova apps to Capacitor. - -### [Ionic Skeleton Loading Screens](https://ionicthemes.com/tutorials/about/improved-ux-for-ionic-apps-with-skeleton-loading-screens) - -UI Skeletons, Ghost Elements, Shell Elements? They are all the same! Think of them as cool content placeholders that are shown where the content will eventually be once it becomes available. In this guide you will learn the importance of adopting the App Shell pattern in your ionic apps and discuss how to implement it using Ionic and Angular. Also, we explain some advanced CSS techniques to take the UX to the next level. - -### [The Complete Guide To Progressive Web Apps with Ionic](https://ionicthemes.com/tutorials/about/the-complete-guide-to-progressive-web-apps-with-ionic4) - -Learn what Progressive Web Apps are, why you should consider them for your next project, and how easy is to build a complete and production ready PWA with Ionic. - -### [Mastering Web Components in Ionic](https://ionicthemes.com/tutorials/about/ionic-4-tutorial-mastering-web-components-in-ionic-4) - -Understanding the new component architecture in Ionic, including web components, shadow DOM, CSS 4 variables and Stencil. - -### [Forms and Validations in Ionic 5](https://ionicthemes.com/tutorials/about/forms-and-validation-in-ionic) - -Learn everything about Ionic Forms and input validations in Ionic Angular apps. - -### [Building a Ionic Firebase App step by step](https://ionicthemes.com/tutorials/about/building-a-ionic-firebase-app-step-by-step) - -Learn how to make a CRUD application using Ionic Framework, Cloud Firestore for the database, and Cloud Storage for image storage. - -### [Ionic and WordPress Integration using the WordPress REST API](https://ionicthemes.com/tutorials/about/ionic-wordpress-integration) - -Learn how to connect your Ionic app with your WordPress site using the WordPress REST API. - -### [Understanding Ionic 2: Imports](http://mcgivery.com/understanding-ionic-2-imports/) - -ES6/TS introduce a new way to bring in external code. Learn about Imports. - -### [Ionic 2 / Angular 2 Concepts](https://www.joshmorony.com/ionic-2-first-look-series-new-angular-2-concepts-syntax/) - -Familiarize yourself with some of the new concepts in Ionic 2 and Angular 2. - -### [Ionic, PouchDB, & SQLite For Storage](http://gonehybrid.com/how-to-use-pouchdb-sqlite-for-local-storage-in-ionic-2/) - -Simplify storage using PouchDB and Sqlite. - -### [Advanced Google Maps](https://www.joshmorony.com/creating-an-advanced-google-maps-component-in-ionic-2/) - -Go beyond adding a simple map to handling offline conditions and complex maps. - -### [Background Geolocation](https://www.joshmorony.com/adding-background-geolocation-to-an-ionic-2-application/) - -Learn how to add geolocation that can run in the background of your app. - -### [Taking Advantage of Observables](https://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html) - -Learn how to use observables in your Ionic 2 app. - -### [Using the Angular Router in ionic/angular 4](https://www.joshmorony.com/using-angular-routing-with-ionic-4/) - -Learn how to use the Angular Router in your `@ionic/angular` 4 app. - -### [Ionic 4 examples using Angular, Vue and React](https://ionicworkshop.com/posts/introduction-to-ionic-framework-angular-vue-react/) - -Learn how to use Ionic 4 with Angular, React and Vue. diff --git a/versioned_docs/version-v8/developer-resources/tools.mdx b/versioned_docs/version-v8/developer-resources/tools.mdx deleted file mode 100644 index c38ba90eef8..00000000000 --- a/versioned_docs/version-v8/developer-resources/tools.mdx +++ /dev/null @@ -1,21 +0,0 @@ -# Tools - -### [Angular CLI](https://github.com/angular/angular-cli) - -Learn more about the power of the Angular CLI - -### [StackBlitz](https://stackblitz.com/) - -Quickly get started with a new Ionic app entirely in the browser! - -### [TypeScript](https://www.typescriptlang.org/) - -Check out the features that make working with TypeScript amazing. - -### [Glossary](../reference/glossary.mdx) - -A list of common terms you'll encounter while developing in Ionic. - -### [Starter Apps](https://ionicthemes.com) - -Ionic Starter Apps to speed up and improve your app development. diff --git a/versioned_docs/version-v8/developer-resources/videos.mdx b/versioned_docs/version-v8/developer-resources/videos.mdx deleted file mode 100644 index bdc0a784d25..00000000000 --- a/versioned_docs/version-v8/developer-resources/videos.mdx +++ /dev/null @@ -1,21 +0,0 @@ -# Videos - -### [Ionic 2 Crash Course](https://www.youtube.com/watch?v=O2WiI9QrS5s&feature=youtu.be) - -A quick introduction to Ionic 2 and how to build your first app. - -### [Ionic & Async](https://blog.ionicframework.com/screencast-ionic-async/) - -Learn how to coordinate multiple events in a timely manner. - -### [Building a TODO app in Ionic 2](http://www.joshmorony.com/build-a-todo-app-from-scratch-with-ionic-2-video-tutorial/) - -Learn how to build out an entire Ionic 2 app. - -### [Angular Connect: Ionic 2](https://www.youtube.com/watch?v=bAlydPwFONY) - -Dive into some of the ideas and goals behind Ionic 2. - -### [Ionic & Typings](https://blog.ionicframework.com/ionic-and-typings/) - -Learn how to add typings for libraries you are using in your Ionic 2 app. diff --git a/versioned_docs/version-v8/intro/first-app.mdx b/versioned_docs/version-v8/intro/first-app.mdx deleted file mode 100644 index 3fc9be2b1fd..00000000000 --- a/versioned_docs/version-v8/intro/first-app.mdx +++ /dev/null @@ -1,24 +0,0 @@ ---- -hide_table_of_contents: true ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsCards from '@components/global/DocsCards'; - -# Build Your First App Tutorial - -Pick the JavaScript framework you plan to use while building your Ionic app: - - - -

A complete guide to get you up to speed with the basics of building Ionic apps with Angular.

- - - -

A complete guide to get you up to speed with the basics of building Ionic apps with React.

- - - -

A complete guide to get you up to speed with the basics of building Ionic apps with Vue.

- - diff --git a/versioned_docs/version-v8/test/page1.mdx b/versioned_docs/version-v8/test/page1.mdx deleted file mode 100644 index cd5b72410d0..00000000000 --- a/versioned_docs/version-v8/test/page1.mdx +++ /dev/null @@ -1,3 +0,0 @@ -# Testing Page 1 - -This is Testing page 1, Get to Testing Page 2 [here](page2.mdx). diff --git a/versioned_docs/version-v8/test/page2.mdx b/versioned_docs/version-v8/test/page2.mdx deleted file mode 100644 index 5ebdef8dca0..00000000000 --- a/versioned_docs/version-v8/test/page2.mdx +++ /dev/null @@ -1,3 +0,0 @@ -# Testing Page 2 - -This is Testing page 2, Get to Testing Page 1 [here](page1.mdx).