Wroclaw University of Science and Technology  -   Faculty of Information and Communication Technology

"Application Programming: Mobile Computing"
  INEA00112  LABORATORY   '2023

Time           Thursday  15:15-16:55
Place:         Laboratory L.2.3 / C-16
Instructor :   Marek Piasecki
Tutor.hrs. :   prowadzacy.wit.pwr.edu.pl ,  room: 321/C-3  or  P2.3/C-16

Assessment of Students' Solutions:

Example archival assessments (from previous edition of the lab) :  Monday 15:15 - 16:55

Laboratory Tasks:


Laboratory (A0)  -  ANDROID - Introduction, Android Studio configuration
Getting familiar with Android platform and its Integrated Development Environment.
  1. Review the first chapters form free online Techotopia ebook  "Android Studio 4.0 Development Essentials" about setting up and configuring Android environment.
  2. Use SDK Manager to check/install/uninstall  Android SDK ( platform, samples, tools, documentation, etc.) for selected API version  (see chapter 2.5)
  3. Use Virtual Device Manager to create Android Emulator for API level (version) installed in the exercise (b)  (see chapters 4 and 5)
  4. Follow instructions from chapter 3 to review the proces of creation / building / running sample "Empty Activity" application.
  5. Use View > Tool Windows: Device File Explorer, LogCat, Emulator,
    to explore the state of emulator and test your sample application.

 
Laboratory (A1)   -  ANDROID  - Understand Activity Life Cycle.
Preparation :
review chapters 12,13,14 from "Android Studio Essentials 12-13-14" ebook preview.

In the lab: Download, unpack and open example LifeCycle demo (based on course by Victor Matos) and try to analyse / debug the application, following the instructions from page 22 (from slides listed at the bottom).
As more adavnced exercise variant, you may try to create your own version of such Android application,which is signaling changes of internal state, through notifying Toasts e.g.
        Toast.makeText(this, "onCreate", 1).show();
Implement such "toasts" for all basic events:  onCreate, onStart, onResume,
onSaveInstanceState, onPause, onStop, onDestroy, onRestart.

Hint:
This task could be simplified with the use of
       Code > Override Methods…        (shortcut: Ctrl+O)
option from the Android Studio’s top menu.
(sort by percent of classes which override the method)

Observe and note the sequence of messages displayed by the Toast-commands after:
  1. Click on application EXIT button
  2. Click on the emulator’s HOME button
  3. Click on the emulator’s CALL ( Green phone button)
  4. Long press on the emulator’s HANG-UP button (Red phone button)
    Note: older versions of Android devices or emulators, sometimes had some extra voice-centric (Green/Red) phone buttons.
  5. Receiving a text-message from other emulator
  6. Making a voice-call from other emulator.
Every time, return to the same "running" state, through clicking on device's launch pad,
and selecting your application icon.

Supplementary reading:
       - Android Application's Life Cycle 
   
 
Laboratory (A2)   -   ANDROID - Creating simple interactive application
  1. Follow instructions from lecture slides Android Devlopment Introduction by Victor Matos (see pg.32-39) to create new Android project and implement single activity "Currency Converter".
    Or alternatively, implement a "Tip calculator", which is described in chapter 2.3.2 of the book "Unlocking Android",

    * Materials for extended version of that task:
       - Android Graphical User Interfaces  (slides from pages 77-78)

  2. Use the Android Logcat view (Menu > View > Tool Windows > Logcat), to test and debug internal state of your Currency Converter application. Utilise the control printouts generated by instructions:
           Log.i( "TAG_for_filtering", "Example message" );
    to visualise the flow of the program execution in the LogCat window.

Supplementary reading:
  - Techotopia / 3. Creating an Example Java Android App in Android Studio
  - Techotopia / 15. Understanding Android Views, View Groups and Layouts
  - Techotopia / 16. A Guide to the Android Studio Layout Editor Tool
older (UI created at runtime, in code)
  - Techotopia / 10. Creating an Android 6 User Interface in Java Code
 
 

Laboratory (A3)  -  ANDROID - Experiments with "responsive" UI design
Create a single screen/activity application, demonstrating the use of components inheriting from the View class (Widgets, Layouts) to construct a user interface, that will dynamically adopt to the target device display::
  • size (small, normal, large, xlarge),
  • orientation (port, land, square)
  • resolution (ldpi, mdpi, hdpi, xhdpi)
Example applications:
  1. Implement a program demonstrating various possibilities for changes in the color, size and font style (of the displayed TextView content), as a result of pressing different buttons or selecting various menu options.
  2. Create your implementation of a general-purpose mathematical calculator.
  3. Develop some kind of multiple-choice e-learning application, that supports memorizing the correlation of predefined number of word-pairs, in two different languages (e.g. Polish and English)
Supplementary readings: Some hints, for "responsive" user interface design (for calculator):

Regular "matrix of buttons", using XML: TableLayout or GridLayout:

grid_with_Table Layout grid_with_GridLayout.xml
grid with TableLayout grid with GridLayout


Laboratory (A4)  -   ANDROID -   Intents and multi-screen apps
Create a multi-activity application demonstrating the use of Android's Intents
to start another activity or build-in Intent handlers (platform provided applications) like: Contacts, Phone Dialer, Web Browser, Google Map, etc:
  1. display the phone contacts list (and optionally receive the data of the selected contact),
  2. send an SMS message to selected receiver,
  3. display google map of the place with the given geographic coordinates (latitude/longitude),
  4. display an “About” screen and return the data bundle containing student's name, email and the version number of the application.
At least one of sub-activities have to be self-made by the student.
At least one of them must return back some results to the launching code.

Supplementary readings:
  - Lesson 10: Android Intents (by Victor Matos)
  - Android Developers - Common Intents (Alarm, Calendar, Camera, Contacts, email, ...)
  - Android Intents - Tutorial (by Lars Vogel)
  - Retrieving Details for a Contact


Laboratory (A5)  -   ANDROID  -  Telephony API
Create "TelephonyDemo" application which provides options for:
  1. Gather basic information about the phone state (CallState, PhoneType, NetworkType, subscriber SIM ID, etc) 
    documentation:  [Listing 7.1]  ,  android.telephony.TelephonyManager
  2. Block all outgoing voice calls to specified phone number
    documentation:  [Listing 7.6]
  3. React to an incoming SMS, automatically sending back another SMS with the name of student (and phone position?) added to the message body.
    documentation:  [Listing 7.7 and 7.8] ,  android.telephony.SmsManager
  4. Monitor / listen to phone state changes (ie. the availability of data connection or changes of signal strength)
    documentation:  [Listing 7.2] ,  android.telephony.PhoneStateListener
Supplementary reading:
  - Chapter 7. Telephony API  - example chapter from book "Android in Action"
  - Requesting Permissions at Run Time - how to solve the permission denied error
    (in API / targetSdkVersion of 23 or higher)
  - example tutorial  Detecting & sending SMS on Android  (version 2018 - updated to
     new policy of requesting permissions and new approach to unpack SMS messages)
  - hints how to listen for phone/network state changes are described on slides 12-17
    of presentation Android - Telephony & SMS


Laboratory (A6)  -   ANDROID  -  UI for collection of  items -  RecyclerView
Implement an Activity which allow to perform CRUD operations on in-memory list of items (or on SQLite database table).
  1. Implement RecyclerView to visualize the contents of the "collection" on the screen.
  2. Add the option to "insert" new item.
  3. Add the option to "delete" selected item.
  4. Use ViewModel to allow application data to survive during configuration changes.
   
   
Android

Laboratory (A_Project)  -   ANDROID -  advanced application
  • Theme of final Android project may be proposed by student.

  • Each student selects, at least two of mobile technology aspects
    (which are not included in laboratories A0 - A6):
    1. mobile database (SQLite)
    2. built-in smartphone sensors: accelerometer, gyroscope, magnetometer, gps
    3. networking, data synchronization or web services
    4. 3D graphics or animation on mobile device
    5. Bluetooth communication between mobile devices
    6.  . . . ?
  • Students use the period of four laboratories (L7-L10) assigned to this project,
    to create individual mobile application,
    that demonstrates selected technology aspects.
       
  • Deadline for uploading the project solution (ZIP) + report (PDF 3-5 pages)
    is Thursday, June 1, 2023.
       
  • Expected content of the the report:
      -     description of the selected task (initial + introduced modifications),
      -     selected two aspects of mobile technology (for self-study)
      -     planned, implemented and unrealized functionalities (+ explanation why not)
      -     materials that were used during the project (tutorials, Github repositories, etc.)
      -     clear indication of the % of authorship of application modules,
      - some screenshots for illustration (    e.g. for different screen configurations)
       
  • The application should have a user interface of some (non-trivial) complexity.
    At least three Windows/Activities/Fragments/Tabs are expected.
    The user interface should adapt to different display configurations (sizes / orientations).
       
  • About the middle of June (after uploading the final solution), there will be individual 15-minute meetings with instructor, "defense" of completed projects (using Zoom)




iOS

Archival laboratory '2015: "Programming iOS 7 in Objective-C" ►

Current laboratory schedule: "Programming iOS 16 in Swift 5"  ▼
Laboratory ( i1 )  -  iOS Intro, development environment, startup application
Getting familiar with Apple iOS16 mobile platform and XCode 14 IDE:
  1. Students who don't know the Mac OS and XCode IDE environment,
    may start learning from Chapter 4. A Guided Tour of Xcode 14
    which provides a brief introduction: how to create a new project, how graphically design a user interface, and finally, how to test iOS app on the iPhone emulator.
       
  2. Use instructions from Answertopia free ebook/tutorial
    Chapter 7. Creating an Interactive iOS 16 App
    to create new iOS project and implement single screen "Currency Converter"

  3. Use iPhone emulator and XCode tools to test and debug your application.

  4. Potential (voluntary) extension:
    Rebuild and expand above "converter" program to the form of a general-purpose mathematical calculator (analogous to the calculator made ​​for the Android).
    Some hints, how to create such calculator, can be found at:
    - 2017 CS193P  Lecture 1 video (starting from 17 minute of recording)
    - 2017 CS193P Lecture 2, video (starting also from 17 minute).
      
Supplementary materials:
  - On line Swift 5 documentation
     or local copy of  "Swift 5.1 programming language" PDF handbook.

  - Answertopia eBook - iOS 16 App Development Essentials (with Swift 5), 
  - 2018 Lecture 1 - Introduction to iOS 11, Xcode 9 and Swift 4 - video on YouTube,
  - 2018 Lecture 2 - MVC, iOS, Xcode - demonstration - based on materials from the
     Stanford University CS193P course "Developing iOS 11 Apps with Swift"



Laboratory ( i2 )  -  iOS - ViewController life cycle, Segues in Storyboard
  1. Study the concept of ViewController in iOS Model-View-Controller architecture:
    CS193p - Lecture 6 - View Controller Life cycle slides
    (and accompanying video , the lifecycle discussion starts from minute 42.30)

    Implement basic "life cycle" methods (e.g. viewDidLoad, viewWill/DidAppear, viewWill/DidDisappear, willRotateToInterfaceOrientation, ..., etc)
    for main ViewController in Converter/Calculator application created during the laboratory ( i1 )

    Use print(...) function to display debug information visualising the sequence of ViewController life cycle events (in similar manner like Toast or Log.i for visualising Android Activity lifecycle in laboratory A1). 

  2. Get familiar with the method of visual composition of Segues between sequence of windows (ViewControllers) in multi-screen iOS application:
    Techotopia - Chapter 24 - Using Storyboards and Segues in XCode 8

    Get familiar with example "Psychologist" application (created as demo for archival "Lecture 6: Multiple MVCs and Segues" from year 2011 > you can watch last 25 minutes of this video , starting from minute 44, especialy demo staring at 1:07 )
    Create similar "StudyAdvisor" application, which will assist in the choice of the  field/speciality of study at our Faculty of Electronics.
    (using questions like: Are you more interested in computer hardware or software?
    What is your favourite programming language: Java, C++, Asembler? , etc.)    


Laboratory ( i3 )  -  TableViewController, Master-Detail programming pattern
  1. Study the concept of UITableView and TableViewController in iOS architecture:
      - simple introductory tutorial - Getting Started With UITableView in Swift
      - Stanford slides CS193p - Lecture 9 - Table View 
         or related  video  (1h 20min)
    More advanced Apple Developer tutorials:
      - Setting up a Table Views (master TableView)
      - Creating a Detail View Controller (detail View)
      - Creating a navigation Stack  (navigation stack)
    Techotopia:
      26) An Overview of iOS 11 Table Views
      27) Using Xcode 9 Storyboards to Build Dynamic TableViews
      28) Implementing iOS 11 TableView Navigation

  2. Create your version of Master-Detail application which utilize master TableViewController to display a brief list of example data items (cars, animals, ...)
    and detail ViewController to present more precise information about selected item.

    The default theme could be application presenting a brief list all specialities at our Faculty of Electronics and related detail information about selected speciality.

    Depending on your preferences, you can use  Static_Cells  for predefined fixed list of items, or Dynamic_Prototypes for variable number of items
    (e.g. loaded from a mutable array or database).
Supplementary materials:



Additional / Archival laboratories:   WinMobile:  W1   ,  W2  ,  W3 

UWP

▼ Programming Windows 10 (Mobile) using UWP (Universal Windows Platform)

Laboratory (W1)  -  Windows 10 Mobile - Introduction, IDE, application lifecycle
Homework / preparation for the lab:
As part of the preparation for the first Windows Mobile lab, watch the introductory presentations from the Microsoft portal Get started with Windows apps : 
and step by step tutorial, explaining how to create simple UWP application:
Task to do in the laboratory:
Practical programming exercises in Visual Studio 2017/19.
Getting familiar with the possibilities of creating applications for mobile devices using the Universal Windows Platform:
  1. Use tips from (above) homework materials, to write your own "Currency Converter" application, with similar functionality like the Android Currency Converter application (from Android A2 lab)

  2. Or alternatively (in a more advanced version), instead of a simple currency converter, you can implement a mathematical calculator similar to the "Android calculator with history", made in the laboratory A3.
Auxiliary materials for laboratory:


Laboratory (W2)    Adaptive User Intarface, Visual States and XML Triggers
  1. Based on suggestions from below listed free-ebook chapters:
    UWP-008 - XAML Layout with Grids   (+ video 16 min)
    UWP-009 - XAML Layout with StackPanel   (+ video 14 min)
    UWP-017 - XAML Layout with RelativePanel   (+ video 16 min)
    expand "converter" program, from the first laboratory (W1), to the form of a general-purpose mathematical calculator which adaptively resize its interface for different devices (analogous to the calculator made ​​for the Android platform).

    Implement interface changes for at least three different frame sizes or orientations.
    For more information on interface adaptability for different screen sizes, orientations
    and for different devices, see sections:
       UWP-037 - Utilizing the VisualStateManager to Create Adaptive Triggers
       UWP-038 - Working with Adaptive Layout
       UWP-039 - Adaptive Layout with Device Specific Views
    from below listed UWP ebook  (chapter 37 starts at page 189).

Supplementary materials:


Laboratory (W3)    Navigation  /  App distribution through Microsoft Store
  1. Study the chapter UWP-019-Working with Navigation ( + video 25 min) and create simple application which contains at least three pages and buttons which enable skipping from one page to another. Add some options to exchange parameters between different pages.
    Supplementary materials (UWP documentation):
     -  Implement navigation between two pages
     -  Navigation history and backwards navigation for Windows apps
     

Windows App distribution through Internet Store:
  1. Prepare the environment - create a developer account:

    To do this, use or create a new account on the platform Azure for Students
    (with id / e-mail different from your university address: xxxxxx@student.pwr.edu.pl)
    An Azure student account can be created using any identifier / email address, but you will need to use (provide later) your college email address with the student's index number to verify your student status.

    Then using the free registration code (voucher) from the Azure platform, which can be activated by selecting options: 
    Education > Software > Microsoft Store > Activate

    student Azure

    after redirecting, create a free development account on the portal
    Microsoft Partner Center: https://partner.microsoft.com/
    (use the same email as the developer ID as in Azure for Student)

    You can publish your own application by selecting options:
    https://partner.microsoft.com/en-us/dashboard
    Partner Centere > Windows & Xbox > Overview > Create a new app

    Microsoft > Centrum partnerskie > Utwórz

  2. A detailed description of the account creation and publication process is available on the website Windows Dev Center:
  3. After successfully completing the publication process, send the link to the laboratory that allows you to download and test the application
    ( Beta testing and targeted distribution )