9. المرفقات

نقدم هنا كيفية تثبيت الأدوات المستخدمة في هذا المستند على أجهزة تعمل بنظام ويندوز 7 أو 8.

9.1. تثبيت JDK

يمكن العثور على URL و[http://www.oracle.com/technetwork/java/javase/downloads/index.html] (أكتوبر 2014)، وأحدث إصدار هو JDK. وسنسمي من الآن فصاعدًا مجلد تثبيت JDK بـ <jdk-install>.

9.2. تثبيت Maven

Maven هي أداة لإدارة تبعيات مشروع Java وأكثر من ذلك. وهي متوفرة في URL و[http://maven.apache.org/download.cgi].

قم بتنزيل الملف المضغوط وفك ضغطه. سنطلق على مجلد تثبيت Maven اسم <maven-install>.

في [1]، يقوم الملف [conf / settings.xml] بتكوين Maven؛

ويحتوي على الأسطر التالية:


  <!-- localRepository
   | The path to the local repository maven will use to store artifacts.
   |
   | Default: ${user.home}/.m2/repository
  <localRepository>/path/to/local/repo</localRepository>
-->

قد تتسبب القيمة الافتراضية للسطر 4 في مشكلة لبعض البرامج، مثل {user.home}، إذا كان مسار {user.home} الخاص بك يحتوي على مسافة (على سبيل المثال [C:\Users\Serge Tahé])، بما في ذلك IntellijIDEA. في هذه الحالة، سنكتب شيئًا مثل:


  <!-- localRepository
   | The path to the local repository maven will use to store artifacts.
   |
   | Default: ${user.home}/.m2/repository
  <localRepository>/path/to/local/repo</localRepository>
  -->
<localRepository>D:\Programs\devjava\maven\.m2\repository</localRepository>

ونتجنب، في السطر 7، استخدام مسار يحتوي على مسافات.

9.3. تثبيت STS (Spring Tool Suite)

سنقوم بتثبيت SpringSource Tool Suite [http://www.springsource.com/developer/sts]، وهو إصدار من Eclipse مزود مسبقًا بالعديد من المكونات الإضافية المرتبطة بإطار عمل Spring، بالإضافة إلى إعدادات Maven مثبتة مسبقًا.

انتقل إلى موقع مجموعة أدوات SpringSource (STS) [1]، لتنزيل الإصدار الحالي من STS [2A] [2B]،

الملف الذي تم تنزيله هو برنامج تثبيت يقوم بإنشاء شجرة الملفات [3A] و[3B]. في [4]، يتم تشغيل الملف القابل للتنفيذ،
في [5]، تظهر نافذة العمل لـ IDE بعد إغلاق نافذة الترحيب. في [6]، يتم عرض نافذة خوادم التطبيقات،

في [7]، نرى نافذة الخوادم. تم تسجيل خادم واحد. وهو خادم VMware متوافق مع Tomcat.

يجب تحديد مجلد تثبيت Maven في STS:

في [1-2]، نقوم بتكوين STS؛
في [3-4]، نضيف تثبيتًا جديدًا لـ Maven؛

في [5]، نحدد مجلد تثبيت Maven؛
في [6]، ننهي عمل المعالج؛
في [7]، نجعل التثبيت الجديد لـ Maven هو التثبيت الافتراضي؛

في [8-9]، يتم التحقق من مستودع Maven المحلي، وهو المجلد الذي سيضع فيه التبعيات التي سيتم تنزيلها، وحيث سيضع STS العناصر التي سيتم إنشاؤها؛

9.4. تثبيت خادم Tomcat

تتوفر خوادم Tomcat على الرابط URL [http://tomcat.apache.org/download-80.cgi]. تم اختبار الأمثلة الواردة في هذا المستند باستخدام الإصدار 8.0.9 المتوفر على الرابط URL [http://archive.apache.org/dist/tomcat/tomcat-8/v8.0.9/bin/].

قم بتنزيل ملف zip المناسب لجهاز العمل [1]. بعد فك ضغط الملف، ستحصل على هيكل المجلدات [2]. بعد ذلك، يمكنك إضافة هذا الخادم إلى خوادم STS:

في [1-3]، نضيف خادمًا جديدًا في STS؛ (لإظهار نافذة الخوادم، انتقل إلى Window / Show view / Other / Server / Servers)؛

في [5]، اختر خادم Tomcat 8؛
في [6]، قم بتسمية هذا الخادم؛
في [8]، حدد مجلد تثبيت Tomcat الذي تم تنزيله مسبقًا؛
في [9]، الخادم الجديد؛

في [11-12]، قم بتشغيل خادم Tomcat 8؛
في [13-14]، نافذة السجلات الخاصة به؛
في [15]، لإيقاف تشغيله؛

9.5. تثبيت [WampServer]

[WampServer] هو مجموعة برامج للتطوير في PHP / MySQL / Apache على جهاز يعمل بنظام Windows. وسنستخدمه حصريًّا لـ SGBD و MySQL.

على موقع [WampServer] [1]، اختر الإصدار المناسب [2]،
الملف القابل للتنفيذ الذي تم تنزيله هو برنامج تثبيت. تُطلب معلومات متنوعة أثناء عملية التثبيت. هذه المعلومات لا تتعلق بـ MySQL. لذا يمكن تجاهلها. تظهر نافذة [3] في نهاية عملية التثبيت. قم بتشغيل [WampServer]،

إلى [4]، ويتم تثبيت أيقونة [WampServer] في شريط المهام أسفل يمين الشاشة [4]،
وعند النقر عليها، تظهر القائمة [5]. وهي تتيح إدارة خادم Apache و SGBD MySQL. لإدارة هذا الخادم، نستخدم الخيار [PhpPmyAdmin]،
فتظهر لنا النافذة التالية،

لن نقدم هنا سوى القليل من التفاصيل حول استخدام [PhpMyAdmin]. يقدم المستند المعلومات التي يجب معرفتها عند الحاجة.

9.6. تثبيت ملحق Chrome [Advanced Rest Client]

في هذا المستند، نستخدم متصفح Chrome من Google (http://www.google.fr/intl/fr/chrome/browser/). سنقوم بإضافة الملحق [Advanced Rest Client] إليه. يمكننا القيام بذلك على النحو التالي:

الذهاب إلى موقع [Google Web store] (https://chrome.google.com/webstore) باستخدام متصفح Chrome؛
ابحث عن تطبيق [Advanced Rest Client]:

سيصبح التطبيق متاحًا للتنزيل:

للحصول عليه، سيتعين عليك إنشاء حساب Google. ثم يطلب [Google Web Store] تأكيدًا [1]:

في [2]، يصبح الملحق المضاف متاحًا في الخيار [Applications] [3]. يظهر هذا الخيار في كل علامة تبويب جديدة تقوم بإنشائها (CTRL-T) في المتصفح.

9.7. إدارة jSON في Java

بشكل شفاف بالنسبة للمطور، يستخدم إطار العمل [Spring MVC] مكتبة jSON [Jackson]. لتوضيح ماهية jSON (JavaScript Object Notation)، نقدم هنا برنامجًا يقوم بتسلسل الكائنات إلى jSON ويقوم بالعكس عن طريق فك تسلسل سلاسل jSON الناتجة لإعادة إنشاء الكائنات الأصلية.

تسمح مكتبة «Jackson» بإنشاء:

سلسلة jSON لكائن: new ObjectMapper().writeValueAsString(object)؛
كائنًا من سلسلة jSON: new ObjectMapper().readValue(jsonString, Object.class).

قد تؤدي كلتا الطريقتين إلى إثارة استثناء IOException. فيما يلي مثال على ذلك.

المشروع أعلاه هو مشروع Maven يحتوي على الملف [pom.xml] التالي؛


<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>istia.st.pam</groupId>
  <artifactId>json</artifactId>
  <version>1.0-SNAPSHOT</version>

  <dependencies>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.3.3</version>
    </dependency>
  </dependencies>
</project>

الأسطر 12-16: التبعية التي تستدعي مكتبة «Jackson»؛

الفئة [Personne] هي كما يلي:


package istia.st.json;

public class Personne {
    // البيانات
    private String nom;
    private String prenom;
    private int age;

    // الشركات المصنعة
    public Personne() {

    }

    public Personne(String nom, String prénom, int âge) {
        this.nom = nom;
        this.prenom = prénom;
        this.age = âge;
    }

    // التوقيع
    public String toString() {
        return String.format("Personne[%s, %s, %d]", nom, prenom, age);
    }

    // المنشورات والمُعيّنات
...
}

الفئة [Main] هي كما يلي:


package istia.st.json;

import com.fasterxml.jackson.databind.ObjectMapper;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

public class Main {
  // أداة التسلسل/إلغاء التسلسل
  static ObjectMapper mapper = new ObjectMapper();

  public static void main(String[] args) throws IOException {
    // إنشاء شخص
    Personne paul = new Personne("Denis", "Paul", 40);
    // العرض jSON
    String json = mapper.writeValueAsString(paul);
    System.out.println("Json=" + json);
    // إنشاء مثيل لـ Personne من Json
    Personne p = mapper.readValue(json, Personne.class);
    // عرض كائن «Personne»
    System.out.println("Personne=" + p);
    // مصفوفة
    Personne virginie = new Personne("Radot", "Virginie", 20);
    Personne[] personnes = new Personne[]{paul, virginie};
    // عرض JSON
    json = mapper.writeValueAsString(personnes);
    System.out.println("Json personnes=" + json);
    // قاموس
    Map<String, Personne> hpersonnes = new HashMap<String, Personne>();
    hpersonnes.put("1", paul);
    hpersonnes.put("2", virginie);
    // عرض JSON
    json = mapper.writeValueAsString(hpersonnes);
    System.out.println("Json hpersonnes=" + json);
  }
}

يؤدي تنفيذ هذه الفئة إلى عرض الشاشة التالية:

Json={"nom":"Denis","prenom":"Paul","age":40}
Personne=Personne[Denis, Paul, 40]
Json personnes=[{"nom":"Denis","prenom":"Paul","age":40},{"nom":"Radot","prenom":"Virginie","age":20}]
Json hpersonnes={"2":{"nom":"Radot","prenom":"Virginie","age":20},"1":{"nom":"Denis","prenom":"Paul","age":40}}

من هذا المثال، نستخلص ما يلي:

الكائن [ObjectMapper] الضروري للتحويلات jSON / الكائن: السطر 11؛
التحويل [Personne] --> jSON: السطر 17؛
التحويل jSON --> [Personne]: السطر 20؛
الاستثناء [IOException] الذي أطلقته الطريقتان: السطر 13.

9.8. تثبيت [Webstorm]

[WebStorm] (WS) هو النسخة المطورة من IDE لـ JetBrains لتطوير تطبيقات HTML / CSS / JS. وقد وجدتُه مثاليًا لتطوير تطبيقات Angular. موقع التنزيل هو [http://www.jetbrains.com/webstorm/download/]. إنه برنامج مدفوع الثمن، لكن يمكن تنزيل نسخة تجريبية صالحة لمدة 30 يومًا. تتوفر نسخة شخصية ونسخة للطلاب بأسعار معقولة.

لتثبيت مكتبات JS داخل أحد التطبيقات، يستخدم WS أداة تُسمى [bower]. هذه الأداة هي وحدة تابعة لـ [node.js]، وهي مجموعة من مكتبات JS. علاوة على ذلك، يتم البحث عن مكتبات JS على موقع Git، مما يتطلب وجود عميل Git على الجهاز الذي يقوم بالتنزيل.

9.8.1. تثبيت [node.js]

موقع تنزيل [node.js] هو [http://nodejs.org/]. قم بتنزيل برنامج التثبيت ثم قم بتشغيله. لا يوجد شيء آخر يجب القيام به في الوقت الحالي.

9.8.2. تثبيت الأداة [bower]

يمكن تثبيت أداة [bower]، التي ستسمح بتنزيل مكتبات جافا سكريبت، بعدة طرق. سنقوم بذلك من خلال وحدة التحكم:


C:\Users\Serge Tahé>npm install -g bower
C:\Users\Serge Tahé\AppData\Roaming\npm\bower -> C:\Users\Serge Tahé\AppData\Roaming\npm\node_modules\bower\bin\bower
bower@1.3.7 C:\Users\Serge Tahé\AppData\Roaming\npm\node_modules\bower
├── stringify-object@0.2.1
├── is-root@0.1.0
├── junk@0.3.0
...
├── insight@0.3.1 (object-assign@0.1.2, async@0.2.10, lodash.debounce@2.4.1, req
uest@2.27.0, configstore@0.2.3, inquirer@0.4.1)
├── mout@0.9.1
└── inquirer@0.5.1 (readline2@0.1.0, mute-stream@0.0.4, through@2.3.4, async@0.8
.0, lodash@2.4.1, cli-color@0.3.2)

السطر 1: الأمر [node.js] الذي يقوم بتثبيت الوحدة النمطية [bower]. لكي يعمل الأمر، يجب أن يكون الملف القابل للتنفيذ [npm] موجودًا في مجلد PATH على الجهاز (انظر الفقرة التالية)؛

9.8.3. تثبيت [Git]

Git هو نظام لإدارة إصدارات البرامج. توجد نسخة خاصة بنظام ويندوز تسمى [msysgit] وهي متاحة في URL و[http://msysgit.github.io/]. لن نستخدم [msysgit] لإدارة إصدارات تطبيقنا، بل سنستخدمه فقط لتنزيل مكتبات JS الموجودة على مواقع من نوع [https://github.com] التي تتطلب بروتوكولوالمقدم من قبل العميل [msysgit]

يقدم مساعد التثبيت خطوات مختلفة، منها ما يلي:

بالنسبة لخطوات التثبيت الأخرى، يمكنك قبول القيم الافتراضية المقترحة.

بمجرد انتهاء تثبيت Git، تحقق من وجود الملف القابل للتنفيذ في PATH على جهازك: [Panneau de configuration / Système et sécurité / Système / Paramètres systèmes avancés]:

تبدو المتغير PATH كما يلي:


D:\Programs\devjava\java\jdk1.7.0\bin;D:\Programs\ActivePerl\Perl64\site\bin;D:\Programs\ActivePerl\Perl64\bin;D:\Programs\sgbd\OracleXE\app\oracle\product\11.2.0\client;D:\Programs\sgbd\OracleXE\app\oracle\product\11.2.0\client\bin;D:\Programs\sgbd\OracleXE\app\oracle\product\11.2.0\server\bin;...;D:\Programs\javascript\node.js\;D:\Programs\utilitaires\Git\cmd

تأكد من أن:

أن مسار مجلد تثبيت [node.js] موجود بالفعل (هنا D:\Programs\javascript\node.js)؛
أن مسار الملف القابل للتنفيذ لعميل Git موجود بالفعل (هنا D:\Programs\utilitaires\Git\cmd)؛

9.8.4. تكوين [Webstorm]

لنتحقق الآن من تكوين [Webstorm]

في الأعلى، حدد الخيار [1]. تظهر قائمة الوحدات النمطية [node.js] المثبتة مسبقًا في [2]. يجب ألا تحتوي هذه القائمة إلا على السطر [3] الخاص بالوحدة النمطية [bower] إذا كنت قد اتبعت عملية التثبيت السابقة.

9.9. تثبيت محاكي لنظام Android

المحاكيات المرفقة مع SDK لنظام أندرويد بطيئة، مما يثني المستخدمين عن استخدامها. تقدم شركة [Genymotion] محاكيًا أكثر كفاءة بكثير. وهو متاح على URL [https://cloud.genymotion.com/page/launchpad/download/]

(فبراير 2014).

سيتعين عليك التسجيل للحصول على نسخة للاستخدام الشخصي. قم بتنزيل المنتج [Genymotion] مع الجهاز الافتراضي VirtualBox؛

قم بتثبيت ثم تشغيل [Genymotion]. ثم قم بتنزيل صورة لجهاز لوحي أو هاتف:

في [1]، أضف جهازًا افتراضيًا؛
في [2]، اختر جهازًا واحدًا أو أكثر لتثبيته. يمكنك تضييق نطاق القائمة المعروضة عن طريق تحديد إصدار Android المطلوب [3] وكذلك طراز الجهاز [4]؛

بمجرد انتهاء التنزيل، ستحصل في [5] على قائمة الأجهزة الافتراضية المتاحة لك لاختبار تطبيقات Android الخاصة بك؛