streamalism.org

1. הקדמה

מאמר זה ייתן לך סקירה מהירה של JHipster, יראה לך כיצד ליצור יישום מונוליטי פשוט וישויות מותאמות אישית באמצעות כלי שורת פקודה.

אנו נבחן את הקוד שנוצר במהלך כל שלב, וגם נכסה את פקודות הבנייה והבדיקות האוטומטיות.

2. מה זה ג'יפסטר

JHipster הוא, בקצרה, מחולל קוד ברמה גבוהה הבנוי על רשימה מקיפה של כלי פיתוח ופלטפורמות חדשניות.

המרכיבים העיקריים של הכלי הם:

• Yeoman, כלי פיגומים מקדימה
• מגף אביב ישן וטוב
• AngularJS, מסגרת Javascript הבולטת. JHipster עובד גם עם AngularJS 2

JHipster יוצר, עם כמה פקודות מעטפת בלבד, פרויקט אינטרנט ג'אווה מן המניין עם ממשק REST API ידידותי ומגיב, מתועד, כיסוי בדיקות מקיף, אבטחה בסיסית ושילוב בסיסי נתונים! לקוד שהתקבל יש הערה טובה ועוקב אחר שיטות העבודה המומלצות בענפים.

טכנולוגיות מפתח נוספות המנוצלות על ידה הן:

• סוואגר, לתיעוד API
• Maven, Npm, Yarn, Gulp and Bower כמנהלי תלות ובונים כלים
• יסמין, מד זווית, מלפפון וגטלינג כמסגרות מבחן
• Liquibase לגירסת מסדי נתונים

איננו נדרשים להשתמש בכל אותם פריטים ביישום שנוצר. הפריטים האופציונליים נבחרים במהלך יצירת הפרויקט.

יישום יפהפה שנוצר על ידי JHipster. זו תוצאה של העבודה שנבצע במהלך המאמר הזה.

3. התקנה

כדי להתקין את JHipster, ראשית נצטרך להתקין את כל התלות שלה:

• Java - שחרור 8 מומלץ
• גיט - מערכת בקרת הגרסאות
• NodeJS
• יאומן
• חוּט

זה מספיק תלות אם תחליט להשתמש ב- AngularJS 2. עם זאת, אם אתה מעדיף ללכת עם AngularJS 1 במקום זאת, תצטרך להתקין את Bower ו- Gulp.

כעת, לסיום, עלינו להתקין את JHipster עצמו. זה החלק הכי קל. מכיוון ש- JHipster הוא מחולל Yeoman, שהוא בתורו חבילת Javascript, ההתקנה היא פשוטה כמו הפעלת פקודת מעטפת פשוטה:

חוט גלובלי להוסיף גנרטור-jhipster

זהו זה! השתמשנו במנהל חבילות חוט להתקנת הגנרטור JHipster.

4. יצירת פרויקט

ליצור פרויקט JHipster בעצם זה לבנות פרויקט Yeoman. הכל מתחיל עם יו פקודה:

mkdir baeldung-app && cd baeldung-app יו jhipster

פעולה זו תיצור את תיקיית הפרויקט שלנו בשם אפליקציית baeldungוהפעל את ממשק שורת הפקודה של Yeoman שיעביר אותנו ביצירת הפרויקט.

התהליך כולל 15 שלבים. אני ממליץ לך לבחון את האפשרויות הזמינות בכל שלב. במסגרת מאמר זה ניצור פשוט, מוֹנוֹלִיטִי יישום, מבלי לסטות יותר מדי מאפשרויות ברירת המחדל.

להלן השלבים הרלוונטיים ביותר למאמר זה:

• סוג של יישום - בחר יישום מונוליטי (מומלץ לפרויקטים פשוטים)
• התקנת גנרטורים אחרים משוק JHipster - הקלד נ. בשלב זה נוכל לרצות להתקין תוספות מגניבות. כמה פופולריות הן ביקורת ישויות המאפשרת מעקב אחר נתונים; bootstrap-material-design, המשתמש ברכיבים אופנתיים של Material Design, ובטבלאות זוויתיות
• מייבן או גרדל - בחר Maven
• טכנולוגיות אחרות - אל תבחר באפשרות כלשהי, פשוט לחץ להיכנס לעבור לשלב הבא. כאן אנו יכולים לבחור לחבר כניסה חברתית עם גוגל, פייסבוק וטוויטר, שזו תכונה נחמדה מאוד.
• מסגרת לקוח - בחר [BETA] זוויתי 2.x. נוכל גם ללכת עם AngularJS 1
• אפשר בינאום - הקלד י, אז תבחר אנגלית כשפת האם. אנחנו יכולים לבחור כמה שפות שאנחנו רוצים כשפה השנייה
• מסגרות מבחן - בחר גטלינג ו מַד זָוִית

JHipster תיצור את קבצי הפרויקט ואז תתחיל להתקין את התלות. ההודעה הבאה תוצג בפלט:

סיימתי. מריץ התקנת npm כדי שתוכל להתקין את התלות הנדרשת. אם זה נכשל, נסה להפעיל את הפקודה בעצמך.

התקנת התלות יכולה להימשך זמן מה. לאחר סיום זה יופיע:

יישום השרת נוצר בהצלחה. הפעל את יישום Spring Boot: יישום הלקוח ./mvnw שנוצר בהצלחה. הפעל את שרת הפיתוח שלך ב- Webpack באמצעות: npm start

הפרויקט שלנו נוצר כעת. אנו יכולים להריץ את הפקודות העיקריות בתיקיית שורש הפרויקט שלנו:

./mvnw #starts Spring Boot, ביציאה 8080 ./mvnw test clean # מריץ את מבדקי החוט של היישום # מריץ את מבחני הלקוח

JHipster מייצר קובץ README, שממוקם ממש בתיקיית הבסיס של הפרויקט שלנו. קובץ זה מכיל הוראות להפעלת פקודות שימושיות רבות אחרות הקשורות לפרויקט שלנו.

5. סקירה כללית של קוד שנוצר

התבונן בקבצים שנוצרו אוטומטית. תוכלו להבחין שהפרויקט נראה לא מעט כמו פרויקט Java / Spring רגיל, אך עם הרבה תוספות.

מכיוון ש- JHipster דואג ליצור גם את קוד החזית, תמצא א package.json קובץ, א webpack תיקייה ועוד כמה דברים הקשורים לאינטרנט.

בואו נחקור במהירות כמה מהקבצים הקריטיים.

5.1. קבצי אחורי

• כצפוי, קוד Java כלול ב- src / main / java תיקיה
• ה src / main / resources בתיקיה יש חלק מהתכנים הסטטיים המשמשים את קוד Java. כאן נמצא את קבצי הבינלאומי (ב- i18n תיקייה), תבניות דוא"ל וכמה קבצי תצורה
• מבחני היחידה והשילוב ממוקמים ב src / test / java תיקיה
• מבחני ביצועים (Gatling) נמצאים ב src / test / gatling. עם זאת, בשלב זה לא יהיה הרבה תוכן בתיקיה זו. לאחר שיצרנו כמה ישויות, מבחני הביצועים עבור אותם אובייקטים ימוקמו כאן

5.2. חזיתי

• תיקיית הקצה הקדמי של השורש היא src / main / webapp
• ה אפליקציה התיקייה מכילה חלק גדול מהמודולים של AngularJS
• i18n מכיל את קבצי הבינלאומי עבור החלק הקדמי
• מבחני יחידות (קארמה) נמצאים ב src / test / javascript / spec תיקיה
• מבחנים מקצה לקצה (מד זווית) נמצאים ב src / test / javascript / e2e תיקיה

6. יצירת ישויות מותאמות אישית

ישויות הן אבני הבניין של יישום JHipster שלנו. הם מייצגים את האובייקטים העסקיים, כמו א מִשׁתַמֵשׁ, א מְשִׁימָה, א הודעה, א תגובה, וכו.

יצירת ישויות עם JHipster זה תהליך ללא כאבים. אנו יכולים ליצור אובייקט באמצעות כלי שורת פקודה, בדומה לאופן בו יצרנו את הפרויקט עצמו, או באמצעות JDL-Studio, כלי מקוון שיוצר ייצוג JSON של הגופים שניתן לייבא אחר כך לפרויקט שלנו.

במאמר זה, נשתמש בכלי שורת הפקודה כדי ליצור שתי ישויות: הודעה ו תגובה.

א הודעה צריך להיות כותרת, תוכן טקסט ותאריך יצירה. זה צריך להיות קשור גם למשתמש שהוא היוצר של ה- הודעה. א מִשׁתַמֵשׁ יכולות להיות רבות פוסטים קשורה אליהם.

א הודעה יכול להיות גם אפס או רבים הערות. כל אחד תגובה יש תאריך טקסט ויצירה.

לפטר את תהליך היצירה שלנו הודעה ישות, עבור לתיקיית הבסיס של הפרויקט שלנו והקלד:

יו jhipster: פוסט ישות

כעת עקוב אחר השלבים שהממשק הציג.

• הוסף שדה בשם כותרת מהסוג חוּט ולהוסיף כמה כללי אימות לשדה (נדרש, אורך מינימלי ו אורך מרבי)
• הוסף עוד שדה שנקרא תוֹכֶן מהסוג חוּט ולעשות את זה גם נדרש
• הוסף שדה שלישי בשם תאריך היווצרות, מהסוג LocalDate
• עכשיו בואו נוסיף את הקשר עם מִשׁתַמֵשׁ. שימו לב שהישות מִשׁתַמֵשׁ כבר קיים. הוא נוצר במהלך הקמת הפרויקט. שם הישות השנייה הוא מִשׁתַמֵשׁ, שם הקשר הוא בורא, והסוג הוא רבים לאחד, שדה התצוגה הוא שֵׁם, ועדיף ליצור את הקשר נדרש
• אל תבחר להשתמש ב- DTO, לך עם ישות ישירה במקום זאת
• בחר להזרים את המאגר ישירות למחלקת השירות. שימו לב, ביישום בעולם האמיתי, סביר להניח שיהיה יותר סביר להפריד בין בקר ה- REST למחלקת השירות
• לסיום בחר גלילה אינסופית כסוג ההחלפה
• תן ל- JHipster אישור להחליף קבצים קיימים במידת הצורך

חזור על התהליך לעיל כדי ליצור ישות בשם תגובה, עם שני שדות, טקסט, מהסוג חוּט, ו תאריך היווצרות מהסוג LocalDate. תגובה צריך גם להיות חובה רבים לאחד מערכת יחסים עם הודעה.

זהו זה! יש שלבים רבים לתהליך, אך תראה שלא לוקח כל כך הרבה זמן להשלים אותם.

תבחין כי JHipster יוצר קבוצה של קבצים חדשים ומשנה כמה אחרים כחלק מתהליך יצירת הגופים:

• א.ג'יפסטר התיקיה נוצרת, המכילה a ג'סון קובץ לכל אובייקט. קבצים אלה מתארים את מבנה הישויות
• הממשי @יֵשׁוּת השיעורים המאושרים נמצאים ב תְחוּם חֲבִילָה
• מאגרים נוצרים ב- מאגר חֲבִילָה
• בקרי REST נכנסים למערכת web.rest חֲבִילָה
• רשימות השינויים של Liquibase לכל יצירת טבלה נמצאות ב משאבים / config / liquibase / changelog תיקיה
• בחלק הקדמי נוצרת תיקיה לכל ישות ב- ישויות מַדרִיך
• קבצי הבינלאומי מוגדרים ב i18n תיקיה (אל תהסס לשנות את אלה אם תרצה)
• כמה מבחנים, חזית וקצה אחורי נוצרים ב- src / test תיקיה

זה די הרבה קוד!

אתם מוזמנים להריץ את הבדיקות ולבדוק שוב שהכול עובר. עכשיו אנחנו יכולים גם להריץ מבחני ביצועים עם Gatling, באמצעות הפקודה (היישום צריך לפעול כדי שהבדיקות האלה יעברו):

mvnw gatling: לבצע

אם ברצונך לבדוק את חזית הפעולה, הפעל את היישום באמצעות./ mvnw, נווט אל // localhost: 8080 והיכנס כ- מנהל משתמש (הסיסמה היא מנהל).

בחר הודעה בתפריט העליון, מתחת ל ישויות פריט בתפריט. תוצג בפניך רשימה ריקה שתכיל מאוחר יותר את כל ההודעות. הקלק על ה צור פוסט חדש כפתור להעלאת טופס ההכללה:

שימו לב כמה זהיר JHipster על רכיבי הטופס והודעות האימות. כמובן שאנחנו יכולים לשנות את הקצה כמה שאנחנו רוצים, אבל הטופס בנוי היטב כמו שהוא.

7. תמיכה באינטגרציה רציפה

JHipster יכול ליצור אוטומטית קבצי תצורה עבור כלי השילוב הרציף המשמשים ביותר. פשוט הפעל פקודה זו:

יו jhipster: ci-cd

ותענה על השאלות. כאן אנו יכולים לבחור לאילו כלי CI אנו רוצים ליצור קבצי תצורה, בין אם ברצוננו להשתמש ב- Docker, Sonar ואפילו לפרוס ל- Heroku כחלק מתהליך הבנייה.

ה ci-cd פקודה יכולה ליצור קבצי תצורה עבור כלי ה- CI הבאים:

• ג'נקינס: הקובץ הוא JenkinsFile
• Travis CI: הקובץ הוא .travis.yml
• מעגל CI: הקובץ הוא circle.yml
• GitLab: הקובץ הוא .gitlab-ci.yml

8. מסקנה

מאמר זה נתן מעט את הטעם של מה JHipster מסוגל. יש כמובן הרבה יותר ממה שאנחנו יכולים לכסות כאן, אז בהחלט תמשיך לחקור את האתר הרשמי של JHipster.

וכמו תמיד, הקוד זמין ב- GitHub.