You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
50
+
Copy file name to clipboardExpand all lines: docs/angular/your-first-app.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -132,7 +132,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can
132
132
133
133
There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
134
134
135
-
135
+
136
136
137
137
Open the photo-gallery app folder in your code editor of choice, then navigate to `/src/app/tab2/tab2.page.html`. We see:
Copy file name to clipboardExpand all lines: docs/angular/your-first-app/2-taking-photos.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -70,7 +70,7 @@ Then, open `tab2.page.html` and call the `addPhotoToGallery()` function when the
70
70
71
71
Save the file, and if it's not running already, restart the development server in your browser by running `ionic serve`. On the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie!
72
72
73
-
73
+
Copy file name to clipboardExpand all lines: docs/angular/your-first-app/6-deploying-mobile.md
+7-7
Original file line number
Diff line number
Diff line change
@@ -60,7 +60,7 @@ ionic cap open ios
60
60
61
61
In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled “Privacy - Camera Usage.” To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
64
64
65
65
Each setting in `Info.plist` has a low-level parameter name and a high-level name. By default, the property list editor shows the high-level names, but it's often useful to switch to showing the raw, low-level names. To do this, right-click anywhere in the property list editor and toggle "Raw Keys/Values."
66
66
@@ -70,15 +70,15 @@ Follow the same process to add the other two Keys required of the Camera plugin:
70
70
71
71
Next, click on `App` in the Project Navigator on the left-hand side, then within the `Signing & Capabilities` section, select your Development Team.
72
72
73
-
73
+
74
74
75
75
With permissions in place and Development Team selected, we are ready to try out the app on a real device! Connect an iOS device to your Mac computer, select it (`App -> Matthew’s iPhone` for me) then click the "Build" button to build, install, and launch the app on your device:
78
78
79
79
Upon tapping the Camera button on the Photo Gallery tab, the permission prompt will display. Tap OK, then take a picture with the Camera. Afterward, the photo shows in the app!
80
80
81
-
81
+
82
82
83
83
## Android Deployment
84
84
@@ -92,7 +92,7 @@ ionic cap open android
92
92
93
93
Similar to iOS, we must enable the correct permissions to use the Camera. Configure these in the `AndroidManifest.xml` file. Android Studio will likely open this file automatically, but in case it doesn't, locate it under `android/app/src/main/`.
96
96
97
97
Scroll to the `Permissions` section and ensure these entries are included:
98
98
@@ -103,11 +103,11 @@ Scroll to the `Permissions` section and ensure these entries are included:
103
103
104
104
Save the file. With permissions in place, we are ready to try out the app on a real device! Connect an Android device to your computer. Within Android Studio, click the "Run" button, select the attached Android device, then click OK to build, install, and launch the app on your device.
105
105
106
-
106
+
107
107
108
108
Once again, upon tapping the Camera button on the Photo Gallery tab, the permission prompt should be displayed. Tap OK, then take a picture with the Camera. Afterward, the photo should appear in the app.
109
109
110
-
110
+
111
111
112
112
Our Photo Gallery app has just been deployed to Android and iOS devices. 🎉
最近の Web View は、カメラ、センサー、GPS、スピーカー、Bluetooth などのハードウェア機能のための組み込み<ahref="https://whatwebcando.today"target="_blank">HTML5 APIs</a>を多数提供していますが、プラットフォーム固有のハードウェア API にアクセスする必要がある場合もあります。Ionic アプリでは、通常は JavaScript API を利用してネイティブプラグインにアクセスしてブリッジする形でハードウェア API を利用することができます。
Copy file name to clipboardExpand all lines: docs/deployment/play-store.mdx
+5-5
Original file line number
Diff line number
Diff line change
@@ -69,15 +69,15 @@ If you haven't made the switch to Android app bundles yet, you will need to opt
69
69
First, create a new app in the Google Play Console. In order to enable app signing, you'll need to navigate to the new release screen, on one of the Production, Open testing, closed testing, or internal testing pages.
70
70
Select the Create new release button as seen below (it doesn't matter which release type, since you don't have to actually go through with creating a new release right now):
71
71
72
-
72
+
![Google Play Console's Production tab with arrow pointing to the 'Create new release' button.](https://blog.ionicframework.com/wp-content/uploads/2021/12/newapps-release-1024x561.png"Google Play Console New Release Creation")
73
73
74
74
Under the App integrity section, click the **Change app signing key** button:
75
75
76
-
76
+
![Google Play Console's App integrity section with the 'Change app signing key' button highlighted.](https://blog.ionicframework.com/wp-content/uploads/2021/12/newapps-signingkey.png"Google Play Console Change App Signing Key Option")
77
77
78
78
Next, select the **Export and upload a key from Java Keystore** option. This is the only way in which you can retain the key and have Google Play use it for signing. If you're using Appflow to build Android apps in the cloud, this is also the required option so you can upload the keystore file to Appflow.
79
79
80
-
80
+
![The Google Play Console showing the option to 'Export and upload a key from Java Keystore'.](https://blog.ionicframework.com/wp-content/uploads/2021/12/newapps-export-1024x564.png"Google Play Console Export and Upload Key Option")
81
81
82
82
Follow the instructions on the screen to generate the Keystore and you can use the same Keystore file to sign your app in the Appflow dashboard as well. If you need any help generating the Keystore file, you can refer to our docs [here](https://ionic.io/docs/appflow/package/credentials#android-certificates).
83
83
Once the generated zip file has been uploaded, you're all set! Build an AAB binary signed with the keystore file then upload it to Google Play.
@@ -88,7 +88,7 @@ As of now, existing apps aren't required to use the AAB format, but you can stil
88
88
89
89
To opt into app signing, you'll need to upload the app signing key used to sign previous releases of the app. Navigate to Setup -> App integrity, then choose one of the two methods seen in the screenshot below. Once the key has been uploaded, you can enroll in Play App Signing.
90
90
91
-
91
+
![The opt-in options for Play App Signing in the Google Play Console.](https://blog.ionicframework.com/wp-content/uploads/2021/12/existingapps-optin.png"Google Play Console Opt-in to Play App Signing")
92
92
93
93
:::tip
94
94
With smaller app sizes, improved performance, and enhanced security, the AAB binary format is a win for app developers and users alike. If you have an existing Android app using the APK format, consider migrating to AAB to take advantage of all the great features it provides.
@@ -140,7 +140,7 @@ Making a developer account with Google Play costs $25 USD.
140
140
141
141
Once a developer account has been created, go ahead and click the `Create an Application`
142
142
143
-
143
+
![The Google Play Store Developer Console with the 'CREATE APPLICATION' button highlighted.](/img/publishing/newAppGPlay.png"Google Play Store Create Application Button")
144
144
145
145
Be sure to fill out the description for the app along with providing screenshots and additional info.
146
146
When ready, upload the signed release AAB/APK that was generated and publish the app.
Copy file name to clipboardExpand all lines: docs/developer-resources/guides/first-app-v3/intro.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
3
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:
4
4
5
-
5
+
6
6
7
7
It’s easy to get started. Reference code for this guide can be [found on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic3/).
8
8
@@ -76,7 +76,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can
76
76
77
77
There are three tabs: “Home”, “About”, and “Contact.” Click on the About tab. It’s a blank canvas, aka the perfect spot to add camera functionality. Let’s begin to transform the About page into a Photo Gallery. Ionic features LiveReload, so when you make changes and save them, the app is updated immediately!
78
78
79
-
79
+
80
80
81
81
Open the photo-gallery app folder in your favorite code editor of choice, then navigate to `/src/pages/about/about.html`. We see:
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:
19
19
20
-
20
+
21
21
22
22
And we’ll just use “Master” as the channel name. Putting this together looks like:
23
23
@@ -168,7 +168,7 @@ $ git push ionic master
168
168
169
169
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:
172
172
173
173
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.
174
174
@@ -180,7 +180,7 @@ What if you deploy a change, then realize that there is a bug? Or perhaps you’
180
180
181
181
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.
184
184
185
185
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.
8
8
9
9
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:
12
12
13
13
You can find these colors defined in `src/theme/variables.scss`.
14
14
@@ -22,7 +22,7 @@ $colors: (
22
22
23
23
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:
24
24
25
-
25
+
26
26
27
27
In our app, this is clearly visible in how the header and the icons are styled.
28
28
@@ -40,7 +40,7 @@ imports: [
40
40
41
41
Now, the iOS version of our app has a Material Design skin!
42
42
43
-
43
+
44
44
45
45
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!
Copy file name to clipboardExpand all lines: docs/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -75,11 +75,11 @@ ionic serve
75
75
76
76
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:
79
79
80
80
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.
83
83
84
84
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.
![renovate[bot]](https://avatars.githubusercontent.com/in/2740?v=4&size=40){kind=avatar}
0 commit comments