diff --git a/docs/guides/component-examples/dynamic-cards.md b/docs/guides/component-examples/dynamic-cards.md index 5879a745c..fdd7184e0 100644 --- a/docs/guides/component-examples/dynamic-cards.md +++ b/docs/guides/component-examples/dynamic-cards.md @@ -13,14 +13,14 @@ Here are some things you should know before you can get started with this guide. * Working with Dynamic Labels, Buttons, and Images !!! caution - This is guide covers advanced topics like dynamic components and web APIs. For sake of keeping this guide at a readable length, some basic instructions will be glossed over with the assumption that you are aware of the workings of other components. If not, please take a look at more basic guides before getting started here. + This is guide covers advanced topics like dynamic components and web APIs. For sake of keeping this guide at a readable length, some basic instructions will be glossed over with the assumption that you are aware of the workings of other components. If not, please take a look at more basic guides before getting started here. ## First steps We will be using the [News API](https://newsapi.org/){:target="_blank"} to fetch the trending headlines. Head over to [https://newsapi.org/](https://newsapi.org/){:target="_blank"}> to get an API key. !!! warning - You will not be able to monetize apps which use the [News API](https://newsapi.org/){:target="_blank"}. To place ads in apps that use this API, you will have to switch to their paid plan first. More information is available [here](https://newsapi.org/pricing){:target="_blank"} + You will not be able to monetize apps which use the [News API](https://newsapi.org/){:target="_blank"}. To place ads in apps that use this API, you will have to switch to their paid plan first. More information is available [here](https://newsapi.org/pricing){:target="_blank"} The API endpoint we'll be using in this guide is `https://newsapi.org/v2/top-headlines?language=en&apiKey={YOUR_API_KEY}` @@ -84,7 +84,7 @@ Next, we create another procedure which takes the JSON object and the array inde ![](/assets/images/guides/dynamic-cards/f_create-card.png) !!! tip - It is recommended you place blocks in procedures so that they are more readable and can be used several times. + It is recommended you place blocks in procedures so that they are more readable and can be used several times. For each news article, we first create a card view that holds all the content we wish to show. Use the `Create Card View` block inside the procedure to make a dynamic card for each article. Each card will be 90% of the screen's width and will have automatic height so that it can resize according to the content inside. @@ -99,7 +99,7 @@ Using the `Dynamic Label` component, we create dynamic labels for each card whic ![](/assets/images/guides/dynamic-cards/m_create-dynamic-label.png) !!! tip - It is recommended you set the `html` parameter to `False` when getting data from external sources. Unchecked HTML can be used to perform unauthorized actions in your app. + It is recommended you set the `html` parameter to `False` when getting data from external sources. Unchecked HTML can be used to perform unauthorized actions in your app. We use the `Dynamic Label` component one more time to create a label for the description. We set the id to a value that we are certain hasn't been used yet. If you are showing the top 200 news articles, then you might want to start your id's from 1000 (or a similarly appropriate number). diff --git a/docs/guides/component-examples/firebase-rules.md b/docs/guides/component-examples/firebase-rules.md index f306569c5..0626bb0e6 100644 --- a/docs/guides/component-examples/firebase-rules.md +++ b/docs/guides/component-examples/firebase-rules.md @@ -23,13 +23,13 @@ Testing your app is easy when you have full access to your database. To enable r ``` !!! info - All your rules should be wrapped inside the `"rules"` tag. Read rules are always set using the `".read"` tag, and write with `".write"`. - + All your rules should be wrapped inside the `"rules"` tag. Read rules are always set using the `".read"` tag, and write with `".write"`. + The JSON code above specifies two rules for your entire database. Each rule can be thought of as a condition that has to return `true` if the operation is to succeed. In the case above, both `.read` and `.write` always return `true`, meaning no checks are required before accessing your database. !!! warning - **Never** set read and write to `true` in a production environment. Your database can be hacked easily and worse, can be wiped clean by unauthorized users. - + **Never** set read and write to `true` in a production environment. Your database can be hacked easily and worse, can be wiped clean by unauthorized users. + ### Authenticated-only mode You can enable only authenticated users to read and write tags in your database. Users can be authenticated using the [Firebase Authentication](https://docs.kodular.io/components/google/firebase-authentication/){:target = "_blank"} component. @@ -48,8 +48,8 @@ The uid of a user can be accessed from the `user ID` variable in the [Login Succ !!! caution - These rules are barely more secure than the [testing mode](#testing-mode) rules. Note that your users can still access **all** tags and values (including other users' personal data), and can still potentially clear your entire database. - + These rules are barely more secure than the [testing mode](#testing-mode) rules. Note that your users can still access **all** tags and values (including other users' personal data), and can still potentially clear your entire database. + ### Uid-Tag mode You can also write rules to restrict read and write access to specific tags. With such rules, you can ensure that the user can edit only the data which they have created. @@ -171,8 +171,8 @@ Write your rules such that your users can access only that data which they can v Set all rules to `false` in a development environment where you would not want anyone to edit your database. It is also suggested you lock your database if your product is shutting down. !!! note - You will still be able to access and edit your database either from your Firebase console or from the command-line interface (CLI). - + You will still be able to access and edit your database either from your Firebase console or from the command-line interface (CLI). + ## Conclusion Firebase Rules are great for securing your database and channeling users to the right tags and values. With the right set of rules, your database will be practically unhackable! diff --git a/docs/guides/component-examples/remote-config.md b/docs/guides/component-examples/remote-config.md index 12eb6dcdb..c649537ae 100644 --- a/docs/guides/component-examples/remote-config.md +++ b/docs/guides/component-examples/remote-config.md @@ -23,7 +23,7 @@ Here are some things you should know before you can get started with this guide. * Working with the Tab Layout and Bottom Navigation components !!! caution - This is guide covers advanced topics like Firebase, staged rollouts, and generic blocks. For sake of keeping this guide at a readable length, some basic instructions will be glossed over with the assumption that you are aware of the workings of other components. If not, please take a look at more basic guides before getting started here. + This is guide covers advanced topics like Firebase, staged rollouts, and generic blocks. For sake of keeping this guide at a readable length, some basic instructions will be glossed over with the assumption that you are aware of the workings of other components. If not, please take a look at more basic guides before getting started here. ## First steps @@ -47,7 +47,7 @@ Add a condition {: .img-caption} !!! tip - It is possible to chain several constraints in a single condition using the "and" button. + It is possible to chain several constraints in a single condition using the "and" button. Your `parameter` can now have two `value`s: one for those in the `random_testers_group`, and another for everybody else. Set the `value` to "true" for the testers, and "false" for others. @@ -64,7 +64,7 @@ Publish your changes {: .img-caption} !!! warning - Publishing your changes will make them live to all your users. Make sure you check everything twice before publishing! + Publishing your changes will make them live to all your users. Make sure you check everything twice before publishing! That's it for the Firebase part. Now let's move to building your app. @@ -77,7 +77,7 @@ Give each `Vertical Arrangement` a distinct background color, and set their heig Finally, set the `Visible` property of the `Bottom Navigation` component to `False`. By default, users will navigate your app using the tab layout. We change this behavior for the random testers group from the Blocks Editor. !!! warning - You will have to upload the `google-services.json` file to Assets to be able to export your app. This file can be obtained from your Firebase Console. + You will have to upload the `google-services.json` file to Assets to be able to export your app. This file can be obtained from your Firebase Console. This is what your designer should look like @@ -102,7 +102,7 @@ We do the same for the `Bottom Navigation` component: first add the menu items ( ![](/assets/images/guides/remote-config/m_add-item.png) !!! info - The icon assets for the navigation items are provided in the AIA in the [Downloads](#downloads) section. + The icon assets for the navigation items are provided in the AIA in the [Downloads](#downloads) section. We can use the same prodcedure we made for the `Tab Layout`. @@ -122,7 +122,7 @@ If the value is `True`, we show the `Bottom Navigation` instead of the `Tab Layo ![](/assets/images/guides/remote-config/e_fetch-success.png) !!! note - Updates to parameters can take a few hours to update across all devices, so don't be alarmed if you don't see all changes immediately. + Updates to parameters can take a few hours to update across all devices, so don't be alarmed if you don't see all changes immediately. ## Conclusion diff --git a/docs/guides/component-examples/securing-app.md b/docs/guides/component-examples/securing-app.md index 60ce937d3..d95af0516 100644 --- a/docs/guides/component-examples/securing-app.md +++ b/docs/guides/component-examples/securing-app.md @@ -13,7 +13,7 @@ Here are some things you should know before you can get started with this guide. * Working with Firebase Rules !!! caution - This is guide covers advanced Firebase topics. For sake of keeping this guide at a readable length, some basic instructions will be glossed over with the assumption that you are aware of the workings of other components. If not, please take a look at more basic guides before getting started here. + This is guide covers advanced Firebase topics. For sake of keeping this guide at a readable length, some basic instructions will be glossed over with the assumption that you are aware of the workings of other components. If not, please take a look at more basic guides before getting started here. Take a look at our guide on [working with Firebase Rules](/guides/component-examples/firebase-rules) for an introduction to the rules system. @@ -62,14 +62,14 @@ Then, add a `Notifier` component and rename it to `MessageNotifier`. We will use Finally, drop the `Firebase Database`, `Firebase Authentication`, and `Device Utilities` components. The `Device Utilities` component will be used to fetch the Android version of the user's device. !!! warning - You will have to upload the `google-services.json` file to Assets to be able to export your app. This file can be obtained from your Firebase Console. + You will have to upload the `google-services.json` file to Assets to be able to export your app. This file can be obtained from your Firebase Console. This is what your designer should look like ![](/assets/images/guides/firebase-rules/d_preview.png) !!! tip - The components shown above have been styled with colors and borders to make them look better. Download AIA from the bottom of the page to use them in your app! + The components shown above have been styled with colors and borders to make them look better. Download AIA from the bottom of the page to use them in your app! ## Coding the blocks @@ -89,7 +89,7 @@ Next, we handle clicks on the `UpdateDetailsButton`. When the button is clicked, ![](/assets/images/guides/firebase-rules/e_current-user-success.png) !!! note - As of now, a user can fetch the list of all uids and update the details of any other user. We will be writing Firebase rules later to ensure the data a user can edit is limited to their uid. + As of now, a user can fetch the list of all uids and update the details of any other user. We will be writing Firebase rules later to ensure the data a user can edit is limited to their uid. Finally, we code the recursive function to get the names of all the users. Note that we cannot use the `Get Tag List` block as the rules we will be writing will block direct access to these tags. diff --git a/docs/guides/component-examples/targeted-notifications.md b/docs/guides/component-examples/targeted-notifications.md index e5aea32c3..9a3f337f5 100644 --- a/docs/guides/component-examples/targeted-notifications.md +++ b/docs/guides/component-examples/targeted-notifications.md @@ -10,7 +10,7 @@ Here are some things you should know before you can get started with this guide. * Setting up OneSignal in your app !!! info - Take a look at our Community-made guide on setting up Push Notifications for your app [here](https://community.kodular.io/t/how-to-send-notifications-using-push-notification-component/180){:target = "_blank"}. + Take a look at our Community-made guide on setting up Push Notifications for your app [here](https://community.kodular.io/t/how-to-send-notifications-using-push-notification-component/180){:target = "_blank"}. ## First steps diff --git a/docs/guides/extensions/create-extensions.md b/docs/guides/extensions/create-extensions.md index 4523d18bf..386296dd6 100644 --- a/docs/guides/extensions/create-extensions.md +++ b/docs/guides/extensions/create-extensions.md @@ -76,7 +76,37 @@ ## Step 5: Building an Extension - +```java +package io.kodular; // package of the extension will be "com.kodular.SimpleMaths" + +// Only these imports are required to interact with Kodular +import com.google.appinventor.components.annotations.*; +import com.google.appinventor.components.runtime.*; +import com.google.appinventor.components.common.*; + +@DesignerComponent(version = 1, // Update version here, You must do for each new release to upgrade your extension + description = "Simple Maths extension created by you", + category = ComponentCategory.EXTENSION, + nonVisible = true, + iconName = "images/extension.png") // Change your extension's icon from here; can be a direct url +@SimpleObject(external = true) +public class SimpleMaths extends AndroidNonvisibleComponent { + + public SimpleMaths(ComponentContainer container) { + super(container.$form()); + } + + @SimpleFunction(description = "Simple addition of two numbers") + public int Add(int a, int b) { + return a + b; + } + + @SimpleFunction(description = "Simple subtraction of two numbers") + public int Subtract(int a, int b) { + return a - b; + } +} +``` * Save the above code to `appinventor-sources/appinventor/components/src/io/kodular/`as `SimpleMaths.java` * Go back to the `appinventor` folder. diff --git a/docs/guides/extensions/kodular-methods.md b/docs/guides/extensions/kodular-methods.md index 4c1d31737..7ec9c06f0 100644 --- a/docs/guides/extensions/kodular-methods.md +++ b/docs/guides/extensions/kodular-methods.md @@ -10,7 +10,33 @@ name of apps. ## Installation - +```java +import android.view.ViewTreeObserver.OnGlobalLayoutListener; +import com.google.appinventor.components.annotations.SimpleObject; + +@SimpleObject +public class Form + extends AppCompatActivity + implements Component, ComponentContainer, HandlesEventDispatching, OnGlobalLayoutListener +{ + + public String getKodularPackageName() { + return null; + } + + public boolean isCustomPackage() { + return false; + } + + public String getInstalledFrom() { + return null; + } + + public boolean isInstalledThruStore() { + return false; + } +} +``` Modify your standard `Form.java` and include the methods above. Even though they look like static returns, they will properly work in Kodular. You just need to declare them like that, so Java compiler understands that such methods diff --git a/docs/guides/keyboard-shortcuts.md b/docs/guides/keyboard-shortcuts.md index 4355ca8d0..95995381f 100644 --- a/docs/guides/keyboard-shortcuts.md +++ b/docs/guides/keyboard-shortcuts.md @@ -2,28 +2,30 @@ To make frequently used actions more accessible, we provide you with these keyboard shortcuts. The same can accessed from `Help` > `Show keyboard shortcuts` in the Creator. -Action | Combination ---- | --- -Create new project | `Alt` + `Shift` + `N` -Import project (.aia) | `Alt` + `Shift` + `I` -Rename project | `Alt` + `R` -Delete project | `Alt` + `Shift` + `X` -Add new screen | `Alt` + `N` -Import screen (.ais) | `Alt` + `I` -Copy screen | `Alt` + `C` -Delete screen | `Alt` + `X` -Switch to Designer | `Alt` + `D` -Switch to Blocks Editor | `Alt` + `B` -Open Assets Manager | `Alt` + `A` -Open projects dashboard | `Alt` + `O` -Export app as APK | `Alt` + `E` -Export app as AAB | `Alt` + `Shift` + `E` -Cut component | `Ctrl` + `X` -Copy component | `Ctrl` + `C` -Duplicate component | `Ctrl` + `D` -Paste component | `Ctrl` + `V` -Paste component properties | `Ctrl` + `Shift` + `V` -Delete component | `Del` / `Backspace` -Navigate components | `↑` / `↓` -Toggle palette search bar | `Ctrl` + `\` -Open this dialog | `Ctrl` + `?` +| Action | Combination | +|----------------------------|------------------------| +| Create new project | `Alt` + `Shift` + `N` | +| Import project (.aia) | `Alt` + `Shift` + `I` | +| Rename project | `Alt` + `R` | +| Delete project | `Alt` + `Shift` + `X` | +| Add new screen | `Alt` + `N` | +| Import screen (.ais) | `Alt` + `I` | +| Copy screen | `Alt` + `C` | +| Delete screen | `Alt` + `X` | +| Switch to Designer | `Alt` + `D` | +| Switch to Blocks Editor | `Alt` + `B` | +| Open Assets Manager | `Alt` + `A` | +| Open projects dashboard | `Alt` + `O` | +| Export app as APK | `Alt` + `E` | +| Export app as AAB | `Alt` + `Shift` + `E` | +| Cut component | `Ctrl` + `X` | +| Copy component | `Ctrl` + `C` | +| Duplicate component | `Ctrl` + `D` | +| Paste component | `Ctrl` + `V` | +| Paste component properties | `Ctrl` + `Shift` + `V` | +| Delete component | `Del` / `Backspace` | +| Undo last change | `Ctrl` + `Z` | +| Redo last change | `Ctrl` + `Y` | +| Navigate components | `↑` / `↓` | +| Toggle palette search bar | `Ctrl` + `\` | +| Open this dialog | `Ctrl` + `?` | diff --git a/docs/guides/monetization-old.md b/docs/guides/monetization-old.md deleted file mode 100644 index c68d28ee9..000000000 --- a/docs/guides/monetization-old.md +++ /dev/null @@ -1,84 +0,0 @@ -# Getting started with Google Ad Manager - -**Kodular has partnered with Google** to provide a **hight quality monetization** integration. This is done thanks to -**Google Ad Manager**, a Google's product that provides custom access to monetization tools. We have implemented their -features into a set of components that will allow you to monetize your apps with Google Ad Manager advertising. - -!!! info - If you are looking for Payments Support, please visit [this Kodular Support page](https://support.kodular.io/support/solutions/folders/204000115658). - -## Registering for a Child Account - -In order to start using Google Ad Manager, you have to apply for a child account to be part of Kodular's network. - -Go to My Kodular, head to the [Payments](https://my.kodular.io/payments) page, and make sure your account is eligible. -Some of the reasons why your account may not be eligible are: - -- You have no approved apps for monetization. -- You have way too many apps rejected for monetization. - -![Eligible Account](/assets/images/guides/monetization/preinvite.png) - -If your account is eligible, you may see a "Request Invite" button. - -![Invite Email](/assets/images/guides/monetization/email.png) - -Follow the setup instructions to create the Google Ad Manager Child Account, and wait until it gets approved by Google. -This process should take _around 2 business days_. - -!!! warning - Make sure you no longer hold a Google Ad Manager account. If so, ask to create a new one. - -Once all the process has been completed, **your account will be ready to show ads**. - -![Approved Account](/assets/images/guides/monetization/approved.png) - -## Registering your app in Google Ad Manager - -The next step is applying for a Google Ads App ID. To do so, head to -the [Google Ad Manager console](https://admanager.google.com), and go to Inventory>Apps section. - -![Apps in Ad Manager](/assets/images/guides/monetization/admapp.png) - -Click on "New App", input your desired app name and check Android as platform. - -=== "Play Store" - - If your app is published in Google Play Store, just search for its name, and all data will automatically be linked. - -=== "Not in Play Store" - - If your app is not published in Google Play Store, check the alternative store and manually type the package name. - It is important that it matches the same one that you wrote in Kodular Creator. - Please note that **we do require apps to be published in any of those app stores**. If this is not your case, we - recommend publishing it in Amazon Appstore, which is free and it takes just 5 minutes to upload an app. - -Once finished, copy the **App ID** field that appears in the list (it will start with `ca-app-pub-`). We will need it -for later. - -## Implementing ads in your app - -This step is the easiest one. Go to Kodular Creator, and open the Monetization>Advertising section. You will find right -at the top 3 components: [**Kodular Banner**](../components/monetization/advertising/banner-ad.md), -[**Kodular Interstitial**](../components/monetization/advertising/interstitial-ad.md) and -[**Kodular Rewarded**](../components/monetization/advertising/rewarded-ad.md). Those three components are the ones that -will provide Google Ad Manager ads in your app. - -Drag and drop them anywhere you want, and play with blocks to properly integrate them. **No Ad Units are needed**, as -all the integration happens automatically. - -![Creator Components](/assets/images/guides/monetization/creator.png) - -Finally, open the **App Settings** modal with the gear button next to the Designer/Blocks ones. Go to the Monetization -section, and input the previously copied **App ID** into the **Google Ads App ID** field. - -### app-ads.txt - -For a better ad delivery, **you should have deployed an `app-ads.txt` file**. You must include our Google Publisher ID -in it. - -Check **[this page](../support/adm/app-ads-txt.md) to learn how to properly implement it**. - -## Exporting your app - -**Your app is now ready!** Just click the Export button and publish it anywhere. diff --git a/mkdocs.yml b/mkdocs.yml index 66292692a..8ed5bbe41 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -156,7 +156,6 @@ nav: - Kodular Methods: guides/extensions/kodular-methods.md - Keyboard Shortcuts: guides/keyboard-shortcuts.md - Monetization: guides/monetization.md - - Monetization (Legacy): guides/monetization-old.md - Components: - components/index.md - Screen: components/screen.md