دليل سريع حول Gemini CLI

1- هدف هذا الدرس التطبيقي

في هذا الدرس التطبيقي العملي، ستثبِّتون Gemini CLI وتصادقون عليه وتجرِّبون بعض حالات الاستخدام الأساسية.

أهداف الدورة التعليمية

• فهم أساسيات Gemini CLI.
• كيفية تنفيذ المهام الأساسية باستخدام Gemini CLI

2. قبل البدء

يمكنكم الحصول على أرصدة Google Cloud لتشغيل هذا الدرس التطبيقي. انقروا هنا للحصول على الأرصدة. يمكنكم الرجوع إلى هذه الصفحة لمعرفة كيفية المطالبة بأرصدة Google Cloud.

• إذا لم يكن لديكم مشروع يمكنكم استخدامه، عليكم إنشاء مشروع جديد في Google Cloud Console.
• في هذا الدرس التطبيقي، سنستخدم Cloud Shell في Google Cloud Platform لتنفيذ الخطوات أدناه. افتحوا Cloud Shell واضبطوا المشروع باستخدام Cloud Shell.
• افتحوا محرِّر Cloud Shell في Google Cloud Platform من خلال النقر على الزر "محرِّر Cloud Shell" أو استخدام هذا الرابط. إذا ظهرت النافذة المنبثقة "تفويض Shell"، انقروا لتفويض محرِّر Cloud Shell.
• يمكنكم التحقّق مما إذا كان المشروع مصادقًا عليه من قبل باستخدام الأمر التالي.

gcloud auth list

• نفِّذوا الأمر التالي في Cloud Shell لتأكيد مشروعكم.

gcloud config list project

• إذا تعذّر عليكم تذكُّر رقم تعريف مشروعكم، يمكنكم إدراج جميع أرقام تعريف مشاريعكم باستخدام

gcloud projects list

• إذا لم يتم ضبط مشروعكم، استخدِموا الأمر التالي لضبطه.

gcloud config set project <YOUR_PROJECT_ID>

• علينا تفعيل بعض الخدمات لتشغيل هذا الدرس التطبيقي. نفِّذوا الأمر التالي في Cloud Shell.

gcloud services enable aiplatform.googleapis.com
gcloud services enable cloudresourcemanager.googleapis.com

3- التثبيت والمصادقة

التثبيت

يأتي Gemini CLI مثبَّتًا مسبقًا في محرِّر Cloud Shell في Google Cloud Platform . إذا أردتم استخدامه، يمكنكم البدء على الفور.

يمكنكم أيضًا تثبيت Gemini CLI في بيئتكم المحلية.

لتثبيت Gemini CLI في بيئتكم المحلية، تحتاجون إلى Nodejs 20+. يمكنكم تنفيذ الأمر التالي لتثبيت Gemini CLI.

npm install -g @google/gemini-cli

للترقية إلى أحدث إصدار، استخدِموا الأمر التالي

npm update -g @google/gemini-cli

شغِّلوا Gemini من خلال تنفيذ الأمر التالي في الوحدة الطرفية.

gemini

المصادقة

إذا كنتم تستخدمون محرِّر Cloud Shell في Google Cloud Platform، من المفترض أن يكون قد تمّت مصادقتكم إذا وافقتم على مصادقة Shell أثناء تشغيله.

إذا كنتم تشغِّلون Gemini CLI محليًا ولم تتم مصادقتكم بعد، ستظهر لكم شاشة مشابهة للشاشة أدناه.

يمكنكم أيضًا كتابة /auth لعرض الشاشة أدناه.

الشكل 1: يوفّر لكم Gemini CLI ثلاث طرق للمصادقة.

أولاً، اخرجوا من Gemini CLI باستخدام الأمر /quit.

المصادقة باستخدام Google : سيؤدي تشغيل الأمر /auth في وحدة التحكّم إلى عرض خيارات المصادقة. اختاروا "تسجيل الدخول باستخدام Google" من الخيارات. ستظهر بعد ذلك شاشة مصادقة Google في متصفّحكم. بعد إكمال عملية تسجيل الدخول، ستتم أيضًا مصادقة وحدة التحكّم. على الرغم من اكتمال المصادقة، لاستخدام Gemini CLI فعليًا، عليكم تحديد مشروع على Google Cloud. ارجعوا إلى شاشة وحدة التحكّم ونفِّذوا الأمر التالي لتحديد المشروع (يمكنكم أيضًا تحديده في ملف ‎ .env).

export GOOGLE_CLOUD_PROJECT=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

المصادقة باستخدام مفتاح واجهة برمجة التطبيقات : للمصادقة باستخدام مفتاح واجهة برمجة التطبيقات، تحتاجون إلى مفتاح واجهة برمجة التطبيقات. يمكنكم إنشاء مفتاح واجهة برمجة التطبيقات من aistudio.google.com . بعد إصدار مفتاح واجهة برمجة التطبيقات، اضبطوه في وحدة التحكّم على النحو التالي:

 export GEMINI_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

المصادقة باستخدام Vertex AI : لاستخدام Gemini API من خلال Vertex AI، اتّبِعوا الخطوات التالية.

أولاً، استخدِموا الأمر أدناه للمصادقة في Google Cloud.

gcloud auth application-default login

نفِّذوا الأوامر التالية بعد ذلك في الوحدة الطرفية.

export GOOGLE_GENAI_USE_VERTEXAI=true
export GOOGLE_CLOUD_PROJECT=Your GCP Project Name
export GOOGLE_CLOUD_LOCATION=us-central1

4. تجربة Gemini CLI

أنتم الآن على استعداد لتجربة Gemini CLI. جرِّبوا حالات الاستخدام التالية.

أولاً، أنشئوا مجلد مشروع باسم my_cli_project.

mkdir ~/my_cli_project
cd ~/my_cli_project

يسمح لكم تشغيل Gemini من مجلد مشروع بتشغيل Gemini CLI بأمان ضمن حدود هذا المجلد.

1. إذا لم تكونوا داخل Gemini CLI بعد، اكتبوا ما يلي في الوحدة الطرفية في Cloud Shell للانتقال إلى Gemini CLI

gemini

2. تشغيل طلب بسيط:

What is the weather today in Tokyo

今日の東京の天気について教えてください

من المفترض أن يظهر لكم الطقس في طوكيو. يُرجى العِلم أنّ تشغيل هذا الأمر يستخدم تلقائيًا

أداة GoogleSearch!

3. تأكيد الأدوات المثبَّتة: نفِّذوا الأمر التالي في الوحدة الطرفية في Gemini CLI. من المفترض أن تتمكّنوا من الاطّلاع على قائمة الأدوات المثبَّتة.

/tools

الشكل 2: قائمة الأدوات المعروضة

4. الحصول على الأخبار من موقع إخباري محلي: (مثلاً https://mainichi.jp، غيِّروه إلى موقعكم الإخباري المحلي).

Get me the news summary from https://mainichi.jp/ 

このサイトからニュースのサマリーを教えてください https://mainichi.jp/ 

من المفترض أن تحصلوا على ملخّص إخباري من الموقع الإخباري المحلي. يُرجى العِلم أنّ الوكيل يستخدم تلقائيًا أداة WebFetch لتنزيل المحتوى من الموقع الإخباري وإنشاء الملخّص.

5. تشغيل مهمة متعدّدة الخطوات(يُرجى تغييرها إلى موقعكم المحلي): أريد الحصول على الأخبار من https://mainichi.jp/ وفلترة الأخبار الرياضية فقط وتلخيصها لي.

Get me the news from https://mainichi.jp/ and filter in only the sports news and summarize that for me.

https://mainichi.jp/ からニュースを取得し、スポーツニュースのみを抽出して、その要約を作成してください。

6. تشغيل أوامر النظام : لتشغيل أوامر النظام، اضغطوا على ! واكتبوا الأوامر. للرجوع إلى الوضع العادي، اكتبوا ! مرة أخرى.

Type ! and Enter key. This starts the command mode.
ls
pwd
Type ! to go back to normal mode.

7. إنشاء لعبة "إكس أو" أدخِلوا الطلب التالي (باللغة الإنجليزية).

Please develop a Tic-Tac-Toe game that meets the following requirements. The solution should be split into separate HTML, CSS, and JavaScript files, with the JavaScript file handling the majority of the game logic independently.
1. General Requirements
The game format should be a match between one human player and one computer player.
When the game ends (a win/loss is determined, or a draw occurs), display "GAME OVER" on the screen along with the winner's name ("X wins!," "O wins!," or "Draw!").
Provide a "Reset" button to start a new game.
2. HTML (index.html)
Create the basic page structure.
The game board should consist of nine squares (cells). Each cell should be clickable and display the player's mark (X or O).
Provide an element to display the game status (e.g., current player's turn, game result).
Place the reset button for starting a new game.
Link the CSS and JavaScript files appropriately.
3. CSS (style.css)
Style the game board and cells so they are visually clear and easy to understand.
Add borders to the cells to indicate they are clickable areas.
Set appropriate font size and color for the X and O marks to ensure good visibility.
Style the game status display and the "GAME OVER" message to make them stand out.
Consider responsive design to ensure appropriate display on various screen sizes.
4. JavaScript (script.js)
It is strongly requested that the JavaScript file handle all the game logic.
4.1. Game State Management
Define an array or object to manage the game board state (e.g., ['', '', '', '', '', '', '', '', '']).
Define a variable to track the current player (X or O). The initial value should be X.
Define a boolean value to track whether the game has ended (win/loss or draw).
4.2. Game Initialization
Create a function to initialize the game board upon page load.
Clear all cells.
Set the current player to X.
Reset the game end flag.
Clear the game result display.
4.3. Player Interaction
Set up event listeners for cell clicks.
Only place the current player's mark and update the board state if the clicked cell is empty.
After placing the mark, execute the following:
Call the win/draw check function.
If a winner is not yet determined, switch the player (X to O, O to X).
4.4. Computer AI Logic
Create a function that is called when it is the computer's (O) turn.
Implement a simple logic where the computer randomly selects an empty cell to place its mark. (While difficulty can be increased in the future, random selection is sufficient initially.)
After the computer places its mark, perform the win/draw check, and if the game is not over, switch the turn back to the human player.
4.5. Win/Draw Determination
Create a function that determines the win/draw status based on the current board state.
Check the following winning conditions:
Three rows
Three columns
Two diagonals
If a player meets a winning condition, declare that player the winner.
If all cells are filled and no player meets a winning condition, declare a draw.
If a win or draw is determined, set the game end flag to true and display the "GAME OVER" message and the result.
4.6. Game End Handling
When the game ends (win/loss or draw), prevent further clicks on the cells.
Display the text "GAME OVER" followed by the message "X wins!," "O wins!," or "Draw!" underneath it.
4.7. Reset Functionality
When the "Reset" button is clicked, call the function to return the game to its initial state.

أدخِلوا الطلب التالي (باللغة اليابانية)

以下の要件を満たす三目並べ（Tic-Tac-Toe）ゲームを開発してください。HTML、CSS、JavaScriptの各ファイルに分割し、JavaScriptはゲームロジックの大部分を単独で処理するようにしてください。
1. 全体要件
プレイヤーは人間1人、コンピューター1人の対戦形式とする。
ゲーム終了時（勝敗が決まった場合、または引き分けの場合）は、画面上に「GAME OVER」と表示し、勝者の名前（「Xの勝利！」「Oの勝利！」または「引き分け！」）も併記すること。
新しいゲームを開始するための「リセット」ボタンを設けること。
2. HTML (index.html)
基本的なページ構造を作成してください。
ゲームボードは、9つのマス目（セル）で構成されるようにしてください。各セルはクリック可能で、プレイヤーのマーク（XまたはO）が表示されるようにします。
ゲームの状態（現在のプレイヤーのターン、ゲーム結果など）を表示する要素を設けてください。
ゲームをリセットするためのボタンを配置してください。
CSSファイルとJavaScriptファイルを適切にリンクしてください。
3. CSS (style.css)
ゲームボードとマス目が視覚的に分かりやすいようにスタイルを設定してください。
マス目には枠線をつけ、クリック可能な領域であることがわかるようにする。
XとOの表示は、見やすいように適切なフォントサイズと色を設定する。
ゲームの状態表示、および「GAME OVER」メッセージが目立つようにスタイルを設定してください。
レスポンシブデザインを考慮し、様々な画面サイズで適切に表示されるようにしてください。
4. JavaScript (script.js)
JavaScriptファイルがゲームロジックの全てを処理することを強く要請します。
4.1. ゲームの状態管理
ゲームボードの状態を管理する配列またはオブジェクト（例: ['', '', '', '', '', '', '', '', '']）を定義してください。
現在のプレイヤー（XまたはO）を追跡する変数を定義してください。初期値はXとする。
ゲームが終了したかどうか（勝敗が決まったか、引き分けか）を追跡するブール値を定義してください。
4.2. ゲームの初期化
ページ読み込み時にゲームボードを初期化する関数を作成してください。
全てのマス目を空にする。
現在のプレイヤーをXに設定する。
ゲーム終了フラグをリセットする。
ゲーム結果表示をクリアする。
4.3. プレイヤーの操作
マス目をクリックした際のイベントリスナーを設定してください。
クリックされたマス目が空の場合のみ、現在のプレイヤーのマークを配置し、ボードの状態を更新する。
マークを配置した後、以下の処理を実行する。
勝敗判定関数を呼び出す。
勝敗が決まっていない場合、プレイヤーを交代する（XからO、OからXへ）。
4.4. コンピューターの思考ロジック
コンピューター（O）が手番の時に呼び出される関数を作成してください。
コンピューターは、空いているマス目の中からランダムに選択してマークを配置するシンプルなロジックを実装してください。（将来的に難易度を上げることも考慮できるが、最初はランダムで十分です）
コンピューターがマークを配置した後、勝敗判定を行い、勝敗が決まっていない場合はプレイヤーを人間に戻す。
4.5. 勝敗判定
現在のボードの状態に基づいて勝敗を判定する関数を作成してください。
以下の勝利条件をチェックする。
3つの行
3つの列
2つの対角線
勝利条件を満たすプレイヤーがいる場合、そのプレイヤーの勝利とする。
全てのマス目が埋まり、かつ勝利条件を満たすプレイヤーがいない場合、引き分けとする。
勝敗または引き分けが決まった場合、ゲーム終了フラグをtrueに設定し、「GAME OVER」メッセージと結果を表示する。
4.6. ゲーム終了時の処理
ゲームが終了した場合（勝敗が決まったか、引き分けか）は、それ以上マス目をクリックできないようにする。
「GAME OVER」というテキストと、その下に「Xの勝利！」「Oの勝利！」または「引き分け！」というメッセージを表示する。
4.7. リセット機能
「リセット」ボタンがクリックされた際に、ゲームを初期状態に戻す関数を呼び出す。

7. أنشئوا وحدة طرفية جديدة من خلال النقر على الوحدة الطرفية> جديدة في الوحدة الطرفية في محرِّر Cloud Shell. اضبطوا رقم تعريف المشروع أولاً إذا لم يكن مضبوطًا بعد،

gcloud projects list
gcloud config set project <YOUR_PROJECT_ID>

cd ~/my_cli_project
python3 -m http.server 8080

من المفترض أن يبدأ خادم Python، افتحوا في المتصفّح (اضغطوا على CTRL وانقروا إذا كنتم في Cloud Shell):

http://localhost:8080

من المفترض أن يبدأ خادم Python، افتحوا في المتصفّح (اضغطوا على CTRL وانقروا إذا كنتم في Cloud Shell):

5. تشغيل إضافات Gemini CLI

يوفّر Gemini CLI بعض الإضافات المفيدة جدًا التي يمكن تثبيتها وتشغيلها بسهولة. تتيح لكم هذه الإضافات الاتصال بخدمات مختلفة واستخدامها. https://geminicli.com/extensions/ هي قائمة بالإضافات المتاحة وتتزايد كل يوم. لمزيد من المعلومات عن إضافات Gemini CLI، يُرجى الرجوع إلى هذه الصفحة: https://medium.com/google-cloud/gemini-cli-tutorial-series-part-11-gemini-cli-extensions-69a6f2abb659

لنثبِّت إحدى إضافات Gemini Nanobanana ونشغِّلها.

لتثبيت الإضافة، نفِّذوا الأمر التالي.

gemini extensions install https://github.com/gemini-cli-extensions/nanobanana

بعد تثبيت الإضافة، أعيدوا تشغيل Gemini CLI وستتمكّنون من تشغيل أوامر nanobanana التالية من Gemini CLI.

• /generate - إنشاء صورة واحدة أو صور متعددة باستخدام خيارات النمط/التنوّع
• /edit : تعديل الصورة
• /restore : استعادة الصورة
• /icon : إنشاء رموز التطبيقات والرموز المفضّلة وعناصر واجهة المستخدم بأحجام متعددة
• /pattern : إنشاء أنماط ونسيج سلس للخلفيات
• /story : إنشاء صور متسلسلة تحكي قصة مرئية أو عملية
• /diagram : إنشاء رسومات بيانية فنية ومخططات انسيابية ونماذج معمارية
• /nanobanana : واجهة باللغة الطبيعية

لننفِّذ بعض الأوامر

قبل تشغيل Nanobanana، عليكم الحصول على مفتاح Gemini API من aistudio.google.com وضبطه هنا،

export NANOBANANA_GEMINI_API_KEY=YOUR_API_KEY

تتوفّر النسخة الإنجليزية

# Single image
/generate "a watercolor painting of a fox in a snowy forest"

# Multiple variations with preview
/generate "sunset over mountains" --count=3 --preview

# Style variations
/generate "mountain landscape" --styles="watercolor,oil-painting" --count=4

# Specific variations with auto-preview
/generate "coffee shop interior" --variations="lighting,mood" --preview

الإصدار الياباني

# Single image
/generate "雪の森のキツネの水彩画"

# Multiple variations with preview
/generate "山にかかる夕焼け" --count=3 --preview

# Style variations
/generate "山岳風景" --styles="watercolor,oil-painting" --count=4

# Specific variations with auto-preview
/generate "コーヒーショップのインテリア" --variations="lighting,mood" --preview

تعديل الصور

غيِّروا اسم الملف إلى اسم ملفكم المحلي.

/edit my_photo.png "change the color of fox to blue"

6. تحدٍّ!

فكِّروا في الطلب لإنشاء هذه التطبيقات!

-Your favorite game
-A photo gallery application
-A Manga generator App

-お気に入りのゲーム
-フォトギャラリーアプリケーション
-マンガ生成アプリ

7. مكتملة

لقد أكملتم هذا الدرس التطبيقي. أحسنت!. لمزيد من المعلومات، يُرجى الاطّلاع على المراجع التالية.

• درس تطبيقي عملي أكثر تفصيلاً
• صفحة المنتج