ionic-framework
योमन आयोनिक प्रोजेक्ट्स के लिए आयोनिक क्लाउड

यो (येओमान) आयनिक परियोजनाओं के लिए आयोनिक प्लेटफ़ॉर्म (आयोनिक क्लाउड)

आयोनिक प्लेटफार्म :

निर्माण, धक्का, तैनात, और अपने ईओण क्षुधा, आसान तरीका पैमाने।

शीर्षक वर्णन:

आयोनिक प्लेटफ़ॉर्म क्रॉस-प्लेटफ़ॉर्म मोबाइल ऐप के प्रबंधन और स्केलिंग के लिए एक क्लाउड प्लेटफ़ॉर्म है। एकीकृत सेवाएं आपको और आपकी टीम को आपके ऐप्स को कुशलता से बनाने, तैनात करने और विकसित करने में सक्षम बनाती हैं।

दस्तावेज़ उद्देश्य:
आयोनिक प्लेटफार्म मानक आयोनिक परियोजनाओं के साथ अच्छी तरह से काम करता है। लेकिन किसी भी गैर-मानक निर्देशिका संरचना का पालन करने वाली परियोजनाओं को कुछ बाधाओं का सामना करना पड़ सकता है। यह दस्तावेज़ योमन का उपयोग करके बनाई गई ईओण परियोजनाओं में आयोनिक प्लेटफ़ॉर्म का उपयोग करने के चरण प्रदान करता है।

दस्तावेज़ स्कोप:
यह दस्तावेज़ योमन का उपयोग करके आयोनिक परियोजना बनाने के लिए मूल चरणों को कवर करता है और इसे आयोनिक प्लेटफ़ॉर्म वेब क्लाइंट का उपयोग करके आयोनिक प्लेटफ़ॉर्म के साथ एकीकृत करता है। यह दस्तावेज़ Ionic Deploy, Ionic Analytics और Ionic Push का उपयोग करने के लिए बुनियादी चरणों को शामिल करता है।

अपेक्षित दर्शक:
इस दस्तावेज़ के लिए लक्षित दर्शक वेब / मोबाइल ऐप डेवलपर्स हैं, दोनों शुरुआती और विशेषज्ञ स्तर की विशेषज्ञता के साथ, जो नीचे दिए गए आवश्यक गुणों से परिचित हैं।

आवश्यक शर्तें:
इस दस्तावेज़ को आज़माने से पहले आपको निम्नलिखित रूपरेखाओं / उपकरणों से परिचित होना चाहिए।

• AngularJs: https://docs.angularjs.org/guide
• IonicFramework: http://ionicframework.com/docs/guide
• योमन: http://yeoman.io/codelab/index.html
• आयोनिक जेनरेटर: https://github.com/diegonetto/generator-ionic
• आयोनिक प्लेटफॉर्म: https://ionic.io/platform

आयनिक फ्रेमवर्क जनरेटर

योमन से आयोनिक फ्रेमवर्क के लिए एक जनरेटर, आधुनिक वेबैप के लिए वेब का मचान उपकरण

Node.js क्रोम के V8 जावास्क्रिप्ट इंजन पर निर्मित एक जावास्क्रिप्ट रनटाइम है। npm जावास्क्रिप्ट के लिए पैकेज मैनेजर है। Http://nodejs.org से नोड (और npm) डाउनलोड और इंस्टॉल करें

$ npm install npm –g
$ npm install -g yo

येओमान आपको नई परियोजनाओं को किक-स्टार्ट करने में मदद करता है, जो आपको उत्पादक बने रहने में मदद करने के लिए सर्वोत्तम प्रथाओं और उपकरणों को निर्धारित करता है।

$ yo ionic [app-name]

Package.json में devDependencies में निम्नलिखित शामिल हैं

"grunt-string-replace": "^1.2.1"

Bower.json में निर्भरता में निम्नलिखित शामिल हैं

"ionic-platform-web-client": "^0.7.1"

Gruntfile.js में स्क्रिप्ट फ़ोल्डर को 'js' में बदलें। यदि आवश्यक हो तो index.html में भी बदलाव करें।

grunt.initConfig({   yeoman: {…………
    scripts: 'js',
    ………… } })

फिर भागो

$ bower install && npm install
$ grunt
$ grunt serve

$ cordova platform add android 
$ grunt build:android --debug

आयनिक मंच-वेब-ग्राहक

एक वेब क्लाइंट जो आयोनिक प्लेटफॉर्म के साथ बातचीत प्रदान करता है।

हमें अपने ऐप को आयोनिक प्लेटफ़ॉर्म पर बात करने के लिए कुछ कोड की आवश्यकता है। हमें प्लगइन्स और Ionic.io प्लेटफ़ॉर्म के साथ इंटरफ़ेस करने के लिए Ionic ऐप वेब क्लाइंट के लिए Ionic प्लेटफ़ॉर्म क्लाइंट जोड़ना होगा।

$ ionic io init

अपने app.js में 'ionic.service.core' मॉड्यूल निर्भरता जोड़ें। Gruntfile.js में नीचे दिए गए अनुसार ग्रंट कार्य 'आयनिकसेटिंग्स' जोड़ें।

grunt.initConfig({
ionicSettings: JSON.stringify(grunt.file.readJSON('./.io-config.json')),

ionicIoBundlePath: 'www/bower_components/ionic-platform-web-client/dist/ionic.io.bundle.min.js',

'string-replace': {
  ionicSettings: {
    files: {
      '<%= ionicIoBundlePath %>': '<%= ionicIoBundlePath %>',
    },
    options: {
      replacements: [
        {
          pattern: 
        '"IONIC_SETTINGS_STRING_START";"IONIC_SETTINGS_STRING_END"',
          replacement: 
        '"IONIC_SETTINGS_STRING_START";var settings =<%= ionicSettings %>; return { get: function(setting) { if (settings[setting]) { return settings[setting]; } return null; } };"IONIC_SETTINGS_STRING_END";'
        }
      ]
    }
  }
},
       copy: {
    ionicPlatform:{
                expand: true,
                cwd: 'app/bower_components/ionic-platform-web-client/dist/',
                src: ['**'],
                dest: 'www/bower_components/ionic-platform-web-client/dist'
               }
    }
});

grunt.registerTask('ionicSettings', ['copy:ionicPlatform','string-replace:ionicSettings']);

Init में 'ionicSettings' जोड़ें और कॉपी के बाद कार्यों को कंप्रेस करें । Index.html में सभी टैग घोषणाओं के बाद नीचे दिए गए टैग को स्थानांतरित करें।

<script src="bower_components/ionic-platform-web-client/dist/ionic.io.bundle.min.js"></script>

फिर भागो

$ Grunt serve

आयोनिक डिप्लॉय

अपने प्रोडक्शन ऐप में रियल-टाइम अपडेट को पुश करें और वर्जन हिस्ट्री को मैनेज करें।

ईओण डिप्लॉय आपको किसी भी बदलाव के लिए मांग पर अपने ऐप को अपडेट करने की सुविधा देता है, जिसमें आपको बाइनरी संशोधनों की आवश्यकता नहीं होती है, जो आपको दिनों की बचत करते हैं, या यहां तक कि सप्ताह, प्रतीक्षा समय की भी। अपने App के लिए Ionic Deploy को कॉन्फ़िगर करने के लिए नीचे दी गई प्रक्रिया का पालन करें।

Gruntfile.js में नीचे दिए गए अनुसार ग्रन्ट कार्य 'परिनियोजन' जोड़ें।

grunt.registerTask('deploy', function () {
  return grunt.task.run(['init', 'ionic:upload' + this.args.join()]);
});

फिर भागो

$ ionic plugin add ionic-plugin-deploy

आयोनिक डिप्लोड कोड:

var deploy = new Ionic.Deploy();

// Check Ionic Deploy for new code
deploy.check().then(function(hasUpdate) {
}, function(err) {
});

// Update app code with new release from Ionic Deploy
deploy.update().then(function(result) {
}, function(error) {
}, function(progress) {
});

अपडेटिंग अपडेट:

अपने ऐप के लिए नया कोड भेजें।

एक एपीके बनाएं और अपना ऐप इंस्टॉल करें। अपने कोड में कुछ बदलाव करें और ' ग्रंट फ़ाइनल ' का उपयोग करके परिवर्तनों को तैनात करें। फिर इसे अपने ऐप से अपडेट करें।

आप इसे apps.ionic.io डैशबोर्ड से भी तैनात कर सकते हैं। आप तैनात पैरामीटर के बिना एप्लिकेशन को तैनात कर सकते हैं। फिर, डैश बोर्ड में आप मेटाडेटा और संस्करण विवरण जोड़ सकते हैं और वहां से ऐप को तैनात कर सकते हैं।

$ grunt build:android --debug

$ grunt deploy --note "release notes"
$ grunt deploy --note "release notes" --deploy=production

आयनिक विश्लेषण

समय के साथ घटनाओं या उपयोगकर्ताओं की कच्ची / अनूठी संख्या का लाइव फीड देखें।

अभी आपके ऐप पर कितने उपयोगकर्ता हैं? उनमें से कितने लोग कल या अगले सप्ताह आपके ऐप का उपयोग करेंगे? जानकारी के बिना, आपके पास यह बताने का कोई तरीका नहीं है कि क्या आपके ऐप का उपयोग उन तरीकों से किया जा रहा है जिनकी आप अपेक्षा करते हैं। अपने App के लिए Ionic Analytics को कॉन्फ़िगर करने के लिए नीचे दी गई प्रक्रिया का पालन करें।

अपने app.js में ionic.service.core के बाद ' ionic.service.analytics ' मॉड्यूल निर्भरता जोड़ें। हमारे मॉड्यूल के रन फ़ंक्शन में एनालिटिक्स रजिस्टर विधि चलाएँ।

$ionicAnalytics.register();

आयोनिक एनालिटिक्स में, आपके ऐप में उपयोगकर्ता द्वारा की गई प्रत्येक ट्रैक की गई कार्रवाई को एक ईवेंट ऑब्जेक्ट द्वारा दर्शाया जाता है। एक घटना समय में एक विशिष्ट बिंदु पर की गई एकल क्रिया है। अपने स्वयं के ईवेंट को ट्रैक करने के लिए, जब भी कोई क्रिया होती है, तब $ionicAnalytics.track(eventType, eventData) कॉल करें।

$ionicAnalytics.track('User Login', {
  user: $scope.user
});

आयन-ट्रैक-टैप निर्देश एक घटना भेजता है जब इसका होस्ट तत्व टैप किया जाता है। संबंधित आयन-ट्रैक-डेटा निर्देश घटना डेटा संलग्न करता है।

<button ion-track-tap="eventType" ion-track-data="expression"></button>

Apps.ionic.io डैशबोर्ड में आप निम्नलिखित विश्लेषिकी डेटा देख सकते हैं,

ईवेंट: समय के साथ ईवेंट की कच्ची संख्या या किसी इवेंट को पूरा करने वाले अनन्य उपयोगकर्ताओं की संख्या देखें। एक ईवेंट ऐप लोड करने वाले उपयोगकर्ता से कुछ भी हो सकता है, खरीदारी की पुष्टि करने के लिए।

फ़नल: फ़नल एक क्रियाओं का एक क्रम है जो आप उपयोगकर्ताओं से अपने ऐप में लेने की अपेक्षा करते हैं, जो एक निर्धारित लक्ष्य तक ले जाते हैं। फ़नल के भरपूर उपयोग से आपको रूपांतरण दरों में सुधार करने में मदद मिलेगी।

खंड: समय के साथ घटनाओं को देखें, एक निर्दिष्ट संपत्ति द्वारा समूहीकृत। या, दी गई संपत्ति से मेल खाने वाले घटनाओं के प्रतिशत की गणना करें। सेगमेंट आपको अपने उपयोगकर्ता आधार को समझने में मदद करते हैं और देखते हैं कि समय के साथ कैसे गुण बदलते हैं।

अवधारण: ट्रैक करें कि उपयोगकर्ता आपके ऐप का उपयोग करने से पहले कितने समय तक सक्रिय हैं। या, निर्धारित बिक्री तक पहुंचने के लिए उपयोगकर्ताओं को परिभाषित लक्ष्य तक पहुंचने में कितना समय लगता है, इसकी पहचान करें।

पल्स: अपने उपयोगकर्ताओं से आने वाली घटनाओं का लाइव फीड।

आयनिक पुश

अपने उपयोगकर्ताओं को लक्षित और स्वचालित पुश सूचनाएं भेजें।

आयोनिक पुश आपको एक साधारण डैशबोर्ड के माध्यम से लक्षित पुश सूचनाएं बनाने देता है जो उपयोगकर्ताओं द्वारा विशिष्ट मानदंडों से मेल खाने पर स्वचालित रूप से भेजे जाएंगे, और अपने स्वयं के सर्वर से पुश सूचनाएं भेजने के लिए एक सरल एपीआई प्रदान करते हैं।

Android पुश प्रोफ़ाइल:

Android पुश सूचनाएं Google क्लाउड मैसेजिंग (GCM) सेवा का उपयोग करती हैं। Google डेवलपर्स कंसोल खोलें और एक प्रोजेक्ट बनाएं। अपने प्रोजेक्ट नंबर को कॉपी करें। यह जीसीएम प्रेषक आईडी या जीसीएम प्रोजेक्ट नंबर होगा ।

एपीआई प्रबंधक अनुभाग में, Google क्लाउड मैसेजिंग एपीआई को सक्षम करें। फिर क्रेडेंशियल अनुभाग पर जाएं और क्रेडेंशियल्स बनाएं चुनें, फिर एपीआई कुंजी, फिर सर्वर कुंजी चुनें। अपनी API कुंजी को नाम दें ... से रिक्त अनुरोध स्वीकार करें ... फ़ील्ड रिक्त करें और बनाएँ पर क्लिक करें । अपनी API कुंजी सहेजें!

प्रमाणीकरण:

Ionic प्लेटफॉर्म पर अपने ऐप के डैशबोर्ड पर जाएं और सेटिंग्स पर जाएं -> प्रमाण पत्र । यदि आपने पहले से नहीं बनाया है, तो एक नया सुरक्षा प्रोफ़ाइल बनाएं, फिर संपादित करें । प्रोफ़ाइल टैग को नोट करें।

अब, एंड्रॉइड टैब पर क्लिक करें और Google क्लाउड मैसेजिंग के रूप में चिह्नित अनुभाग ढूंढें, Google डेवलपर कंसोल पर आपके द्वारा बनाई गई एपीआई कुंजी दर्ज करें, फिर सहेजें पर क्लिक करें । सेटिंग्स -> एपीआई कीज पर जाएं । एपीआई टोकन के तहत, एक नया टोकन बनाएं और इसे कॉपी करें। यह आपका एपीआई टोकन होगा ।

$ ionic plugin add phonegap-plugin-push --variable SENDER_ID="GCM_PROJECT_NUMBER"
$ ionic config set gcm_key <your-gcm-project-number>
$ ionic config set dev_push false
$ ionic io init

नोट: फोनगैप-प्लगइन-पुश के लिए Android समर्थन रिपॉजिटरी संस्करण 32+ की आवश्यकता है

अपने app.js में ionic.service के बाद ' ionic.service.push ' मॉड्यूल निर्भरता जोड़ें।

आयनिक पुश कोड:

सेवा को प्रारंभ करें और अपने डिवाइस को अपने मॉड्यूल के रन फ़ंक्शन में पंजीकृत करें। आपको उपयोगकर्ता द्वारा सूचना भेजने के लिए उपयोगकर्ता द्वारा पंजीकृत डिवाइस टोकन की आवश्यकता होगी।

$ionicPush.init({
  debug: true,
  onNotification: function (notification) {
    console.log'token:', notification.payload);
  },
  onRegister: function (token) {
    console.log('Device Token:', token);
    $ionicPush.saveToken(token); // persist the token in the Ionic Platform
  }
});

$ionicPush.register();

फिर भागो

$ grunt build:android --debug

आयोनिक पुश आपको डैशबोर्ड के माध्यम से लक्षित पुश सूचनाएं बनाने देता है। आप नीचे दिए गए प्रारूप में सर्वर से सूचनाएं भी भेज सकते हैं।

curl -X POST -H "Authorization: Bearer API_TOKEN" -H "Content-Type: application/json" -d '{
    "tokens": ["DEVICE_TOKEN"],
        "profile": "PROFILE_TAG",
        "notification": {
                "message": "Hello World!"
        "android": {
                  "title": "Hi User",
                  "message": "An update is available for your App",
                  "payload": {
                        "update": true
                  }
            }
    } }' "https://api.ionic.io/push/notifications"

नोट: IOS पुश को iOS के लिए कॉन्फ़िगर करने के चरण पुश प्रोफाइल बनाने के अलावा समान हैं। IOS पुश प्रोफाइल बनाने के लिए http://docs.ionic.io/v2.0.0-beta/docs/ios-path-foriles देखें

नमूना अनुप्रयोग

यहां सैंपल एप डाउनलोड करें ।

संदर्भ के लिए एक नमूना ऐप यहां संलग्न है।

IonicApp:
│
│   bower.json
│   Gruntfile.js
│   package.json    
│       
└───app
    │   index.html
    │   
    ├───js
    │       app.js
    │       controllers.js
    │       
    └───templates
            home.html
            menu.html

नोट: यह एक स्टैंडअलोन प्रोजेक्ट नहीं है। दिए गए कोड किसी भी मुद्दे या त्रुटियों के मामले में, इस दस्तावेज़ में ऊपर दी गई प्रक्रियाओं का उपयोग करके बनाई और कार्यान्वित की गई परियोजना के खिलाफ तुलना करने के लिए ही है।