Android App Programming 2021-2022
Lab 9: Drawing, extending Android Projects, and a bit on Node.js

In this lab, we will look at a few things that may be useful for your project, like drawing, extending more complex Android projects, and creating your own web APIs.

Remember:

Exercise 1: Canvas

1. Create a new Empty Project normally.

2. And add a new Java class myView. Follow this online tutorial about creating the myView class canvas tutorial

3. The myView class is a View. Revisit Lab 7 about how to add this view in your MainActivity.
Hint: in onCreate you can replace setContentView(R.layout.activity_main); by:
ConstraintLayout myLayout = new ConstraintLayout(this);
myLayout.setBackgroundColor(Color.rgb(3, 132, 252));
myView mycustomview = new myView(getApplicationContext(), null);
myLayout.addView(mycustomview);
setContentView(myLayout);

Exercise 2: Canvas inside a Fragment

1. Create a new Project that is a Bottom Navigation Activity.

2. Add a new Fragment to your navigation. Revisit Lab 8 about how to do this, or follow the video.

3. And add the Java class myView again (you can copy it from the previous exercise).

4. Replace the content of the Fragment with your view.
Hint: in the onCreate of the Fragment replace return inflater.inflate(R.layout.fragment_canvas, container, false); by another View (or even a layout).
myView mycustomview = new myView(container.getContext(), null);
return mycustomview;

Exercise 3: Preparing to code for the project

This part helps you start preparing for your project. Step 1 is creating an account for a code repository.

Steps 2-4 are optional. They are a preparation in case you want to have an online server of your own (to store data, make http requests, etc). You can start if you want this week and continue depending on your project.

1. Get a GitHub Account

Sign up for an account on GitHub. It's a code repository with versioning control using Git (software for tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development).

Check if your machine has Git installed (eg in windows run in a terminal "git --version"). If not, let Anastasia know.

2. Optional: Create a Node.js

This part is in case you want to have your own online server.

First, install Node.js in your machine (from the site nodejs.org). You might not be able to install Node.js globally on your machine in IUT (see next).

In IUT: you can try two solutions to install a personal version of Node.js in IUT: (i) either use portable-node to install it only for the current user; or (ii) download the Windows Binary zip (my solution for my Macos), here is a quick tutorial on how to do that install without admin and add the directory to your PATH.

3. Optional: Get a Heroku Account (to deploy your Node.js server online)

Sign up for an account on Heroku. It's a host for web applications that includes several basic DevOps convenience functions.

Also install the Heroku command line tools in your own machine Heroku CLI . If you cannot install it locally, use the tool npm that is installed with Node.js npm install -g heroku. If no solution works, let Anastasia know.

If you prefer not to use Heroku, you can either run your web service locally or use a different host you might have access to.

4. Optional: Follow online tutorial for adding (deploying online) a Node.js to Heroku

Follow this tutorial: Hosting a Node.js app on Heroku in Less than 5 Minutes (If when you try to "git push master origin" you get an error like "remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead..." check this solution issue with access).

At this point you have an online server that you can extend to add JSON files and APIs to access them (like the Chuck Norris) online DB.

5. (Optional, to see later on) Respond to Requests with JSON

Create a URI that responds to HTTP requests with some JSON data. The content of your JSON response is not important for the moment; just pick any.

6. (Optional, to see later on) Mock the ICNDB

Change your service to be a mirror for the ICNDB. You can simply forward the requests that you get to the original web service and then return the result. Use the function http.request to do this.

Change your app from Lab 3 to use your API instead of the original ICNDB.

7. (Optional, to see later on) Extract the ICNDB

Create a local copy of the ICNDB, which you then use to answer requests with your local data. You can use the language of your choice to extract the data from the ICNDB.

6. (Optional, to see later on) Use a Database

Store the data extracted from the ICNDB in a database, which you then access from your Node.js code when responding to requests.

back to the course web site





FR - FR - FR



Dans ce laboratoire, nous allons examiner quelques éléments qui peuvent être utiles pour votre projet, comme le dessin, l'extension de projets Android plus complexes et la création de vos propres API Web.

Rappel :

Exercise 1: Canvas

1. Créez comme d'habitude un nouveau projet Empty.

2. Et ajoutez une nouvelle classe Java myView. Suivez cette tutorial en ligne pour créer le myView classe canvas tutorial

3. La classe myView est une View. Vous pouvez revisiter Lab 7 en comment vous pouvez l'ajouter dans votre MainActivity.
Hint: dans onCreate vous pouvez remplacer le setContentView(R.layout.activity_main); par :
ConstraintLayout myLayout = new ConstraintLayout(this);
myLayout.setBackgroundColor(Color.rgb(3, 132, 252));
myView mycustomview = new myView(getApplicationContext(), null);
myLayout.addView(mycustomview);
setContentView(myLayout);

Exercise 2: Canvas dans un Fragment

1. Créez un nouveau Project qui est un Bottom Navigation Activity.

2. Ajoutez un Fragment dans votre navigation. Revisitez Lab 8, oui suivez le vidéo et transparents.

3. Ajoutez de nouveau la classe Java class myView (de l'Ex 1).

4. Replacez le contenue du Fragment avec votre view.
Hint: dans l' onCreate du Fragment replacez return inflater.inflate(R.layout.fragment_canvas, container, false); avec une autre View (ou un Layout).
myView mycustomview = new myView(container.getContext(), null);
return mycustomview;

Exercice 3 : Préparation du codage pour le projet

Cette partie vous permet de commencer à vous préparer pour votre projet. L'étape 1 consiste à créer un compte pour un dépôt de code.

Les étapes 2 à 4 sont optionels. Elles constituent une préparation au cas où vous voudriez avoir votre propre serveur en ligne (pour stocker des données, faire des requêtes http, etc). Vous pouvez commencer si vous voulez cette semaine et continuer dépendant de votre projet.

1. Obtenir un compte GitHub

Créez un compte sur GitHub. Il s'agit d'un dépôt de code avec contrôle des versions à l'aide de Git (logiciel permettant de suivre les modifications de n'importe quel ensemble de fichiers, généralement utilisé pour coordonner le travail des programmeurs développant en collaboration le code source pendant le développement de logiciels).

Vérifiez si votre machine a Git installé (par exemple, sous windows, exécutez dans un terminal "git --version"). Si ce n'est pas le cas, envoyez un msg à Anastasia.

2. Optionel: Créez un Node.js

Cette partie concerne le cas où vous voulez avoir votre propre serveur en ligne.

Tout d'abord, installez Node.js dans votre machine (depuis le site nodejs.org). Il se peut que vous ne puissiez pas installer Node.js globalement sur votre machine dans l'IUT (voir suivant).

Á l'IUT: il y a deux solutions pour installer Node.js dans les machines IUT: (i) utilisez portable-node pour installer Node.js que pour vous; ou (ii) télécharger le zip Windows Binary zip, voici un tutoriel rapide sur la façon de le faire install without admin et ajoutez le dans votre PATH.

3. Optionel: Obtenez un compte Heroku (pour déployer votre serveur Node.js en ligne).

Ouvrez un compte sur Heroku. Il s'agit d'un hôte (host) pour les applications web qui comprend plusieurs fonctions de base de commodité DevOps.

Installez aussi le Heroku command line tools dans votre machine Heroku CLI . Si vous ne pouvez pas l'installer localement, utilisez l'util npm installé avec Node.js npm install -g heroku. Si cela ne fonctionne pas, envoyez un msg à Anastasia.

Si vous préférez ne pas utiliser Heroku, vous pouvez soit exécuter votre service web localement ou utiliser un autre hôte auquel vous avez accès.

4. Optionel: Suivez le tutoriel en ligne pour ajouter (déployer en ligne) un Node.js à Heroku

Suivez ce tutorial: Hosting a Node.js app on Heroku in Less than 5 Minutes (Si lorsque vous essayez de "git push master origin" vous obtenez une erreur du type "remote : La prise en charge de l'authentification par mot de passe a été supprimée le 13 août 2021. Veuillez utiliser un jeton d'accès personnel à la place..." vérifiez cette solution issue with access).

À ce stade, vous disposez d'un serveur en ligne que vous pouvez étendre pour ajouter des fichiers JSON et des API pour y accéder (comme la BD en ligne de Chuck Norris).

5. (Optionel, à voir plus tard) Répondre aux requêtes avec JSON

Créez un URI qui répond aux requêtes HTTP avec des données JSON. Le contenu de votre réponse JSON n'a pas d'importance pour le moment ; choisissez-en un.

6. (Optionel, à voir plus tard) Mock ICNDB

Changez votre service pour devenir un mirroirt pour ICNDB. Vous pouvez simplement transmettre les demandes que vous recevez au service web d'origine et renvoyer ensuite le résultat. Utiliser la fonction http.request.

Changez votre application du Lab 3 pour utiliser votre API au lieu de l'ICNDB original.