Mobile App Dev 2022W: Tutorial 6 - Revision history

Soma: /* Tasks */

2022-02-16T18:09:57Z

Tasks

← Older revision		Revision as of 18:09, 16 February 2022
Line 28:		Line 28:
	# Make the title of the app "Text Analyzer 5" and make the text non-bold (while keeping the same font size).		# Make the title of the app "Text Analyzer 5" and make the text non-bold (while keeping the same font size).
	# Put the results area in the center of the screen and the text input area just below it (thus swapping the position of the two). Make sure your layout works with different phone sizes and when the phone is rotated.		# Put the results area in the center of the screen and the text input area just below it (thus swapping the position of the two). Make sure your layout works with different phone sizes and when the phone is rotated.
	# Change the background color of the app ~~(shown in the button and the status bar on top)~~ from purple to anything else.		# Change the button and status bar background color of the app from purple to anything else.

	==[https://homeostasis.scs.carleton.ca/~soma/mad-2022w/code/textanalyzer-5/ textanalyzer-5 Code]==		==[https://homeostasis.scs.carleton.ca/~soma/mad-2022w/code/textanalyzer-5/ textanalyzer-5 Code]==

Soma at 14:58, 16 February 2022

2022-02-16T14:58:01Z

← Older revision		Revision as of 14:58, 16 February 2022
Line 1:		Line 1:
	~~'''This tutorial is still in development.'''~~

	In this tutorial you will be playing with [https://homeostasis.scs.carleton.ca/~soma/mad-2022w/code/textanalyzer-5 textanalyzer-5], which implements the same text analyzer functionality as [[Mobile App Dev 2022W: Tutorial 5\|Tutorial 5's textanalyzer-3]]. This version, however, is an Android app.		In this tutorial you will be playing with [https://homeostasis.scs.carleton.ca/~soma/mad-2022w/code/textanalyzer-5 textanalyzer-5], which implements the same text analyzer functionality as [[Mobile App Dev 2022W: Tutorial 5\|Tutorial 5's textanalyzer-3]]. This version, however, is an Android app.

Soma at 14:57, 16 February 2022

2022-02-16T14:57:47Z

← Older revision		Revision as of 14:57, 16 February 2022
Line 14:		Line 14:
	* Create a new Android simulator using the Device Manager. We suggest a Pixel 3a running API 31, but other devices should work fine.		* Create a new Android simulator using the Device Manager. We suggest a Pixel 3a running API 31, but other devices should work fine.
	* Save the project and run it!		* Save the project and run it!


	==Questions==		==Questions==

Soma: /* Tasks */

2022-02-16T14:57:24Z

Tasks

← Older revision		Revision as of 14:57, 16 February 2022
Line 30:		Line 30:
	# Add a menu item "None" that sets the analysis mode to "None". When selected, the result area should show "Please choose an analysis mode." (This message should appear without you changing any part of the code except for the part determining the contents of the menu.)		# Add a menu item "None" that sets the analysis mode to "None". When selected, the result area should show "Please choose an analysis mode." (This message should appear without you changing any part of the code except for the part determining the contents of the menu.)
	# Make the title of the app "Text Analyzer 5" and make the text non-bold (while keeping the same font size).		# Make the title of the app "Text Analyzer 5" and make the text non-bold (while keeping the same font size).
			# Put the results area in the center of the screen and the text input area just below it (thus swapping the position of the two). Make sure your layout works with different phone sizes and when the phone is rotated.
	# Change the background color of the app (shown in the button and the status bar on top) from purple to anything else.		# Change the background color of the app (shown in the button and the status bar on top) from purple to anything else.
	# Put the results area in the center of the screen and the text input area just below it (thus swapping the position of the two). Make sure your layout works with different phone sizes and when the phone is rotated.

	==[https://homeostasis.scs.carleton.ca/~soma/mad-2022w/code/textanalyzer-5/ textanalyzer-5 Code]==		==[https://homeostasis.scs.carleton.ca/~soma/mad-2022w/code/textanalyzer-5/ textanalyzer-5 Code]==

Soma: /* Tasks */

2022-02-16T14:57:07Z

Tasks

← Older revision		Revision as of 14:57, 16 February 2022
Line 30:		Line 30:
	# Add a menu item "None" that sets the analysis mode to "None". When selected, the result area should show "Please choose an analysis mode." (This message should appear without you changing any part of the code except for the part determining the contents of the menu.)		# Add a menu item "None" that sets the analysis mode to "None". When selected, the result area should show "Please choose an analysis mode." (This message should appear without you changing any part of the code except for the part determining the contents of the menu.)
	# Make the title of the app "Text Analyzer 5" and make the text non-bold (while keeping the same font size).		# Make the title of the app "Text Analyzer 5" and make the text non-bold (while keeping the same font size).
			# Change the background color of the app (shown in the button and the status bar on top) from purple to anything else.
	# Put the results area in the center of the screen and the text input area just below it (thus swapping the position of the two). Make sure your layout works with different phone sizes and when the phone is rotated.		# Put the results area in the center of the screen and the text input area just below it (thus swapping the position of the two). Make sure your layout works with different phone sizes and when the phone is rotated.

Soma at 14:55, 16 February 2022

2022-02-16T14:55:51Z

← Older revision		Revision as of 14:55, 16 February 2022
Line 15:		Line 15:
	* Save the project and run it!		* Save the project and run it!

	~~<!---~~
	~~==Key Concepts & APIs==~~

	* [https://developer.apple.com/library/archive/documentation/General/Conceptual/Devpedia-CocoaApp/Storyboard.html#//apple_ref/doc/uid/TP40009071-CH99-SW1 Storyboard introduction].
	* [https://developer.apple.com/tutorials/app-dev-training/creating-a-storyboard-app Creating a Storyboard App (tutorial)]

	While there are web pages on UIKit and Storyboard in Apple's main documentation websites (as seen above), today the clear emphasis is on SwiftUI and it is much harder to find specific documentation on these older technologies. So I mostly relied on other sources.

	[https://www.appcoda.com Appcoda] has a lot of valuable resources on iOS UIKit. I finally figured out how to do menus through [https://www.appcoda.com/colorpicker-datepicker/ this article by Gabriel Theodoropoulos on UIKit additions in iOS 14], and I found [https://www.appcoda.com/auto-layout-guide/ Simon Ng's introduction to Storyboard layouts] very helpful.

	==Questions==		==Questions==

	# ~~Why are we using a class (on line 10) rather than a struct~~?		# What is the Kotlin equivalent of let?
	# How ~~are the @IBOutlet~~ variables ~~(lines 12-15) related~~ to ~~the contents~~ of ~~Main.storyboard? What about the @IBAction function (line 59)~~?		# How does Kotlin handle variables that could be null? How does this compare to Swift's handling of nil?
	# ~~What does updateAnalysis do? Why~~ are ~~there so many calls to it~~? What ~~is the corresponding code in textanalyzer-2~~?		# How similar are Kotlin and Swift function definitions? What about their declaration of dictionaries and sets?
	# ~~What does setupAnalysisMenu() do?~~ What is the ~~corresponding code~~ for ~~this~~ in ~~textanalyzer-2~~?		# What is the :: for? Is something similar used in Swift?
	# How ~~do the Storyboard constraints determine~~ the ~~app's~~ layout? Specifically, ~~why~~ is the ~~menu at~~ the ~~top, the results at the bottom, and~~ the ~~text input~~ in ~~the center of the screen~~?		# How is the layout XML connected with Kotlin code? Specifically, what are the two ways they are integrated in this program? Howe do they compare with how Swift code and Storyboard layouts are connected on iOS?
			# What is the role of the twatcher object? What is the equivalent in iOS Storyboard programs? What about SwiftUI?

	==Tasks==		==Tasks==
Line 37:		Line 29:
	# Add the Empty and Pets Mentioned actions as they were in textanalyzer-2.		# Add the Empty and Pets Mentioned actions as they were in textanalyzer-2.
	# Add a menu item "None" that sets the analysis mode to "None". When selected, the result area should show "Please choose an analysis mode." (This message should appear without you changing any part of the code except for the part determining the contents of the menu.)		# Add a menu item "None" that sets the analysis mode to "None". When selected, the result area should show "Please choose an analysis mode." (This message should appear without you changing any part of the code except for the part determining the contents of the menu.)
	# Make the title of the app "Text Analyzer 4" and make the text non-bold (while keeping the same font size).		# Make the title of the app "Text Analyzer 5" and make the text non-bold (while keeping the same font size).
	# Put the results area in the center of the screen and the text input area just below it (thus swapping the position of the two). Make sure your layout works with different phone sizes and when the phone is rotated.		# Put the results area in the center of the screen and the text input area just below it (thus swapping the position of the two). Make sure your layout works with different phone sizes and when the phone is rotated.

	~~-->~~

	==[https://homeostasis.scs.carleton.ca/~soma/mad-2022w/code/textanalyzer-5/ textanalyzer-5 Code]==		==[https://homeostasis.scs.carleton.ca/~soma/mad-2022w/code/textanalyzer-5/ textanalyzer-5 Code]==

Soma: /* Getting Started */

2022-02-16T03:51:04Z

Getting Started

← Older revision		Revision as of 03:51, 16 February 2022
Line 7:		Line 7:
	* Install [https://developer.android.com/studio/ Android Studio]. While you can run the version for MacOS, you should probably download and run it on the fastest computer you have access to.		* Install [https://developer.android.com/studio/ Android Studio]. While you can run the version for MacOS, you should probably download and run it on the fastest computer you have access to.
	* Create a new Phone & Tablet project, selecting the "Empty Activity" template. Select "Kotlin" as the language and API 21, Android 5.0 as the minimum SDK.		* Create a new Phone & Tablet project, selecting the "Empty Activity" template. Select "Kotlin" as the language and API 21, Android 5.0 as the minimum SDK.
	* Replace the contents of [https://homeostasis.scs.carleton.ca/~soma/mad-2022w/code/textanalyzer-5/MainActivity.kt MainActivity.kt] (under app->java) with the version below. Be sure to copy the raw source rather than the syntax highlighted version below.		* Replace the contents of [https://homeostasis.scs.carleton.ca/~soma/mad-2022w/code/textanalyzer-5/MainActivity.kt MainActivity.kt] (under app->java) with the version below. Be sure to copy the raw source rather than the syntax highlighted version below. '''Preserve the first line that says "package", however, as that depends on the precise name you gave your application.'''
	* Replace the contents of [https://homeostasis.scs.carleton.ca/~soma/mad-2022w/code/textanalyzer-5/activity_main.xml activity_main.xml] (under app->res->layout) with the version below. Select the "Code" view (rather than "Design") so you can see the raw XML. You may have save the file below locally as your browser may try to interpret the XML.		* Replace the contents of [https://homeostasis.scs.carleton.ca/~soma/mad-2022w/code/textanalyzer-5/activity_main.xml activity_main.xml] (under app->res->layout) with the version below. Select the "Code" view (rather than "Design") so you can see the raw XML. You may have save the file below locally as your browser may try to interpret the XML.
	* Add the following lines to themes.xml (in app->res->values->themes), just below the last item:		* Add the following lines to themes.xml (in app->res->values->themes), just below the last item:

Soma: /* Getting Started */

2022-02-16T03:47:57Z

Getting Started

← Older revision		Revision as of 03:47, 16 February 2022
Line 5:		Line 5:
	==Getting Started==		==Getting Started==

	# Install [https://developer.android.com/studio/ Android Studio]. While you can run the version for MacOS, you should probably download and run it on the fastest computer you have access to.		* Install [https://developer.android.com/studio/ Android Studio]. While you can run the version for MacOS, you should probably download and run it on the fastest computer you have access to.
	# Create a new Phone & Tablet project, selecting the "Empty Activity" template. Select "Kotlin" as the language and API 21, Android 5.0 as the minimum SDK.		* Create a new Phone & Tablet project, selecting the "Empty Activity" template. Select "Kotlin" as the language and API 21, Android 5.0 as the minimum SDK.
	# Replace the contents of [https://homeostasis.scs.carleton.ca/~soma/mad-2022w/code/textanalyzer-5/MainActivity.kt MainActivity.kt] (under app->java) with the version below. Be sure to copy the raw source rather than the syntax highlighted version below.		* Replace the contents of [https://homeostasis.scs.carleton.ca/~soma/mad-2022w/code/textanalyzer-5/MainActivity.kt MainActivity.kt] (under app->java) with the version below. Be sure to copy the raw source rather than the syntax highlighted version below.
	# Replace the contents of [https://homeostasis.scs.carleton.ca/~soma/mad-2022w/code/textanalyzer-5/activity_main.xml activity_main.xml] (under app->res->layout) with the version below. Select the "Code" view (rather than "Design") so you can see the raw XML. You may have save the file below locally as your browser may try to interpret the XML.		* Replace the contents of [https://homeostasis.scs.carleton.ca/~soma/mad-2022w/code/textanalyzer-5/activity_main.xml activity_main.xml] (under app->res->layout) with the version below. Select the "Code" view (rather than "Design") so you can see the raw XML. You may have save the file below locally as your browser may try to interpret the XML.
	# Add the following lines to themes.xml (in app->res->values->themes), just below the last item:~~<pre>~~		* Add the following lines to themes.xml (in app->res->values->themes), just below the last item:
	<item name="windowActionBar">false</item>		<item name="windowActionBar">false</item>
	<item name="windowNoTitle">true</item>		<item name="windowNoTitle">true</item>
	~~</pre>~~		* Create a new Android simulator using the Device Manager. We suggest a Pixel 3a running API 31, but other devices should work fine.
	# Create a new Android simulator using the Device Manager. We suggest a Pixel 3a running API 31, but other devices should work fine.		* Save the project and run it!
	# Save the project and run it!


	<!---		<!---

Soma: /* Getting Started */

2022-02-16T03:47:19Z

Getting Started

← Older revision		Revision as of 03:47, 16 February 2022
Line 11:		Line 11:
	# Add the following lines to themes.xml (in app->res->values->themes), just below the last item:<pre>		# Add the following lines to themes.xml (in app->res->values->themes), just below the last item:<pre>
	<item name="windowActionBar">false</item>		<item name="windowActionBar">false</item>
	<item name="windowNoTitle">true</item></pre>		<item name="windowNoTitle">true</item>
			</pre>
	# Create a new Android simulator using the Device Manager. We suggest a Pixel 3a running API 31, but other devices should work fine.		# Create a new Android simulator using the Device Manager. We suggest a Pixel 3a running API 31, but other devices should work fine.
	# Save the project and run it!		# Save the project and run it!

Soma: /* Getting Started */

2022-02-16T03:47:03Z

Getting Started

← Older revision		Revision as of 03:47, 16 February 2022
Line 9:		Line 9:
	# Replace the contents of [https://homeostasis.scs.carleton.ca/~soma/mad-2022w/code/textanalyzer-5/MainActivity.kt MainActivity.kt] (under app->java) with the version below. Be sure to copy the raw source rather than the syntax highlighted version below.		# Replace the contents of [https://homeostasis.scs.carleton.ca/~soma/mad-2022w/code/textanalyzer-5/MainActivity.kt MainActivity.kt] (under app->java) with the version below. Be sure to copy the raw source rather than the syntax highlighted version below.
	# Replace the contents of [https://homeostasis.scs.carleton.ca/~soma/mad-2022w/code/textanalyzer-5/activity_main.xml activity_main.xml] (under app->res->layout) with the version below. Select the "Code" view (rather than "Design") so you can see the raw XML. You may have save the file below locally as your browser may try to interpret the XML.		# Replace the contents of [https://homeostasis.scs.carleton.ca/~soma/mad-2022w/code/textanalyzer-5/activity_main.xml activity_main.xml] (under app->res->layout) with the version below. Select the "Code" view (rather than "Design") so you can see the raw XML. You may have save the file below locally as your browser may try to interpret the XML.
	# Add the following lines to themes.xml (in app->res->values->themes), just below the last item:		# Add the following lines to themes.xml (in app->res->values->themes), just below the last item:<pre>
	<item name="windowActionBar">false</item>		<item name="windowActionBar">false</item>
	<item name="windowNoTitle">true</item>		<item name="windowNoTitle">true</item></pre>
	# Create a new Android simulator using the Device Manager. We suggest a Pixel 3a running API 31, but other devices should work fine.		# Create a new Android simulator using the Device Manager. We suggest a Pixel 3a running API 31, but other devices should work fine.
	# Save the project and run it!		# Save the project and run it!